<template> 
  <div class="app-container">         
    <el-form  :model="queryParams" :inline="true">  
      <el-row :gutter="24" style="height:40px">
        <el-col :span="4">  
               <el-select
            v-model="queryParams.vesselName"
            filterable
            clearable
            placeholder="Vessel" 
            style="width:180px"
            @change="selectVessel(queryParams)">
            <el-option :key="item.vesselName" :label="item.vesselName" :value="item.vesselName" v-for="item in vessels">
            </el-option>
          </el-select>  
        </el-col>
        <el-col :span="4"> 
          <el-select v-model="queryParams.voyageNo" filterable clearable placeholder="Voyage" @change="selectVoyage" style="width:130px">
            <el-option :key="item.voyageNo" :label="item.voyageNo" :value="item.voyageNo" v-for="item in voyages">
            </el-option>
          </el-select>   
        </el-col>
        <el-col :span="5">    
            <el-select v-model="queryParams.pols" filterable clearable allow-create placeholder="POL" multiple style="width:230px"> 
              <el-option :key="item.portName" :label="item.portName" :value="item.portName" v-for="item in pols" >
              </el-option>
            </el-select> 
      </el-col>  
      <el-col :span="5">    
        <el-select v-model="queryParams.pods" filterable clearable  allow-create placeholder="POD" multiple  style="width:230px"> 
            <el-option :key="item.portName" :label="item.portName" :value="item.portName" v-for="item in pods">
          </el-option>
        </el-select>     
      </el-col> 
      <el-col :span="4">  
       <el-select v-model="queryParams.status" filterable clearable placeholder="Status"  style="width:160px">
        <el-option :key="index" :label="item" :value="index" v-for="(item, index) in fullStatus"> </el-option>
       </el-select> 			 
       </el-col>
     </el-row>
     <el-row  :gutter="24">
      <el-col :span="4">  
          <el-input v-model="queryParams.bookingNo" placeholder="Booking No" clearable  style="width:180px"/> 
      </el-col>
       <el-col :span="4">  
          <el-input v-model="queryParams.blNo" style="width:130px" clearable placeholder="B/L No"/> 
      </el-col>  
       <el-col :span="5">   
          <el-select
              v-model="queryParams.brand"
              class="ipt"
                @change="handBrand(queryParams.brand)"
              clearable
              filterable  
              style="width:230px"
              placeholder="Brand"
            >
              <el-option :key="item" :label="item" :value="item" v-for="item in brands" />
            </el-select> 
        </el-col>  
         <el-col :span="5">  
          <el-select v-model="queryParams.model" class="ipt" filterable  clearable placeholder="Model">
              <el-option :key="item.name" :label="item.name" :value="item.name" v-for="item in models" />
            </el-select>  
        </el-col>  
        <el-col :span="6">  
        <el-button :loading="loading" type="primary" icon="search"  @click="search">{{ $t("ship.button.search") }}</el-button> 
        <SearchReset :query-params="queryParams" @reset="exitClickEvent"></SearchReset>
         
       </el-col>
       </el-row> 
       <el-row  style="margin-top: 10px;margin-bottom: 10px;position: relative;">
          <el-button type="success" plain  icon="upload"  v-hasPermi="['draft:import']" @click="uploadFileForm">Import</el-button> 
          <el-button type="primary" plain icon="plus" @click="addClickEvent" v-hasPermi="['draft:add']"> Create New </el-button>
          <el-button type="success" plain icon="edit" @click="reViseClickEvent"  v-hasPermi="['draft:edit']"> Revise Present </el-button>
          &nbsp;&nbsp;
  
        <el-dropdown placement="bottom-start" v-if="listData.length != 0"  v-hasPermi="['draft:export']">
          <el-button type="warning" plain icon="download">
            Print<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-if="listData.length != 0" fixed="right" @click="exportClickEvent"> Print For Owner(EN)</el-dropdown-item>
                <el-dropdown-item v-if="listData.length != 0" fixed="right" @click="exportClickCNEvent"> Print For Owner(EN/CN)</el-dropdown-item>
                <el-dropdown-item v-if="listData.length != 0" fixed="right" @click="exportForAgent"> Print For Agent </el-dropdown-item>
                <el-dropdown-item v-if="listData.length != 0" fixed="right" @click="exportForFN"> Print For FN</el-dropdown-item>
                <el-dropdown-item v-if="listData.length != 0" fixed="right" @click="exportCargoList"> Print Cargo List</el-dropdown-item>
            </el-dropdown-menu>
            </template>
      </el-dropdown> 
          &nbsp;&nbsp;    
      <el-dropdown placement="bottom-start" trigger="click"  v-hasPermi="['draft:changeStatus']" >
        <el-button type="warning" plain>
          Change Status<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item :key="index" :label="item" :value="index+1" v-for="(item,index) in  fullStatusSelect" :disabled="selectList.length <=0" @click="handleStatusAll(index+1)" >{{item}}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown> 
        <el-col :xs="4" :sm="4" :md="4" :lg="10" :xl="12">
        <div class="setting-btn">
          <el-button type="primary" @click="openColumnConfig" icon="Setting">
            Setting
          </el-button>
        </div>
    </el-col> 
      </el-row>
    </el-form>
    
  <el-table  
    ref="tableRef"
    stripe
    :data="filterListData" 
    v-loading="loading"
    max-height="800"
    highlight-current-row
    @sort-change="handleSortChange"   
    class="unfreight-table"
    @expand-change="handleExpandChange"
    show-overflow-tooltip
    row-key="seqNo"
    :expand-row-keys="expands"
    :cell-style="{textAlign:'center'}"
    header-cell-class-name="el-table-headerCell"
	  :row-class-name="tableRowClassName"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" :selectable="selectable" width="35" />
    <el-table-column type="expand" width="1" fixed="left">
        <template #default="scope">
          <el-table
            class="unfreight-table-history"
            :data="scope.row.children"
            :show-header="false"
            :border="true"
             :cell-style="{textAlign:'center'}"
            style="margin-left: 50px;"
            :cell-class-name="({ row, column, rowIndex, columnIndex }) => { return getCellClassName(scope.row, row, column, rowIndex, columnIndex) }"
          >
            <el-table-column prop="sales" label="Sales" width="70"  v-if="isShowColumn('sales')" />
            <el-table-column prop="status" label="Status" width="120" v-if="isShowColumn('status')" v-hasPermi="['draft:edit']">
              <template #default="scope">
                {{ fullStatus[scope.row.status] }}
              </template>
            </el-table-column>
            
            <el-table-column prop="bookingNo" label="Booking No" width="120" v-if="isShowColumn('bookingNo')"  />
            <el-table-column prop="channel" label="Booking Channel" width="200" v-if="isShowColumn('channel')" :filters="channelFilters" :filter-method="filterHandler" align="center" />
            <el-table-column prop="terminal" :label="'Terminal Ground'+ '\r\n' +  'Service Provider'" width="160" v-if="isShowColumn('terminal')"   />
            <el-table-column prop="payer" label="Freight Payable Party" width="200"  />
            <el-table-column prop="shipper" label="Shipper" width="200"  /> 
            <el-table-column prop="consignee" label="Consignee" width="200"   v-if="isShowColumn('consignee')" />
            <el-table-column prop="notifyParty" label=" Notify Party" width="300"  v-if="isShowColumn('notifyParty')" />
            <el-table-column prop="pol" label="POL" width="100"  v-if="isShowColumn('pol')" />
            <el-table-column prop="pod" label="POD"  width="100"  v-if="isShowColumn('pod')" />
            <el-table-column prop="brand" label="Brand" width="100"   v-if="isShowColumn('brand')" />
            <el-table-column prop="model" label="Model" width="130"   v-if="isShowColumn('model')" />
            <el-table-column prop="cargoType" label="Cargo Type" width="170"  v-if="isShowColumn('cargoType')" />
            <el-table-column prop="cargoDesc" label="Cargo Description" width="170"  v-if="isShowColumn('cargoDesc')" />
            <el-table-column prop="lashingHookFront" :label="'Lashing Hook' + '\n' + '  (FRONT)'" width="120"  v-if="isShowColumn('lashingHookFront')">
              <template #default="scope">
                  {{lashHookStatus[scope.row.lashingHookFront] }}
              </template> 
            </el-table-column>
            <el-table-column prop="lashingHookRear" :label="'Lashing Hook' + '\n' + '  (REAR)'" width="120"  v-if="isShowColumn('lashingHookRear')">
              <template #default="scope">
                {{lashHookStatus[scope.row.lashingHookRear] }}
              </template> 
            </el-table-column>  
            <el-table-column prop="carType" :label="'New Vehicle/' + '\n' +'Used Vehicle'" width="160" align="center" v-if="isShowColumn('carType')" />
            <el-table-column prop="fuelType" label="Fuel Type" width="220" align="center" v-if="isShowColumn('fuelType')" />
            <el-table-column prop="totalUnits" label="total Units" width="120" align="center" v-if="isShowColumn('totalUnits')" />
            <el-table-column prop="unitLength" label="Length(m)" width="90" align="center" v-if="isShowColumn('unitLength')" />
            <el-table-column prop="unitWidth" label="Width(m)" width="90" align="center" v-if="isShowColumn('unitWidth')" />
            <el-table-column prop="unitHeight" label="Height(m)" width="90" align="center" v-if="isShowColumn('unitHeight')" /> 
            <el-table-column prop="unitCbm" label="Unit Cbm" width="90" align="center" v-if="isShowColumn('unitCbm')" />
            <el-table-column prop="shippingTerms" :label="'freight' +'\n' +'rate term'" width="90" align="center" v-if="isShowColumn('shippingTerms')" />
            <el-table-column  prop="unitWeight"   label=""  width="150" align="center" v-if="isShowColumn('unitWeight')">
              <template #default="{ row: { unitWeight } }">
                <span>{{ unitWeight ? (unitWeight / unitWeightFilter.value) : '' }}</span>
              </template>
            </el-table-column>
          
            <el-table-column prop="totalVolume" :label="'total volume'+'\n'+'（cbm）'" width="120" align="center" v-if="isShowColumn('totalVolume')" /> 
            <el-table-column prop="totalWeight" :label="'total weight'+'\n'+'(kg)'" width="120" align="center" v-if="isShowColumn('totalWeight')" /> 
            <el-table-column prop="spareLocation" :label="'Spare Parts Location' + '\n' + '（Inside Vehicle / On Deck）'" width="200" align="center" v-if="isShowColumn('spareLocation')"/>
            <!-- <el-table-column prop="spareVolume" :label="'Spare' + '\n' + 'Parts' + '\n' + 'volume（cmdb）'" width="150" align="center"/>
            <el-table-column prop="spareWeight" :label="'Spare Parts' + '\n' + 'Weight(kg)'" width="170" align="center"/> -->
            <el-table-column prop="blNo" label="B/L No" width="150" align="center" v-if="isShowColumn('blNo')" /> 
            <el-table-column prop="remark" label="Remarks" width="150" align="center" v-if="isShowColumn('remark')" />
          </el-table>
        </template>
    </el-table-column> 
    <el-table-column type="seqNo" label="Item"  width="50" v-if="isShowColumn('seqNo')"  >
        <template #default="scope">
            <div style="cursor:pointer" @click="openexpand(this,scope.row)" v-if="scope.row.id != null">
            <span  v-if="scope.row['isopen'] && scope.row['isopen']==1 ">
              <el-icon class="el-icon-arrow-right" >
              <ArrowDown/>
              </el-icon><span>{{ scope.row.seqNo}}</span>
            </span>
            <span v-else >
              <el-icon class="el-icon-arrow-right"   >
                <ArrowRight/>
              </el-icon><i class="el-icon-arrow-down" ></i><span>{{ scope.row.seqNo}}</span>
            </span>
          </div>
        </template>
    </el-table-column>
    <el-table-column prop="sales" label="Sales" width="70"  v-if="isShowColumn('sales')" /> 
    <el-table-column prop="status" label="Status" width="120"  text-align="center" v-if="isShowColumn('status')" v-hasPermi="['draft:edit']"> 
      <!-- <template #header>
      Booking status   
      <sup 
      style="border-radius: 50%; border: 1px solid #73AD21;font-size:7px;height:11px;width:11px;padding:0px 3px;line-height:11px;cursor:pointer;margin-left:-2px" 
      title="please choose cargo type">?</sup>
      </template>
   -->
      <template #default="scope">
        <el-form-item >
          <el-select
            v-model="scope.row.status"
            class="ipt"
            clearable 
            v-if="scope.row.id !=null"
            :disabled="scope.row.status == 3 || scope.row.model== null
             || scope.row.unitLength == null || scope.row.unitWidth == null || scope.row.unitHeight == null"
            @change="handleStatus(scope.row)"
          >
            <el-option :key="index" :label="item" :value="index" v-for="(item,index) in  fullStatus" 
            :disabled="disableStatus.includes(index) " 
             />
          </el-select>
        </el-form-item>
      </template>
    </el-table-column> 
    <el-table-column prop="bookingNo" label="Booking No." width="120"  align="center" v-if="isShowColumn('bookingNo')" > 
       <template #header>
        <el-popover
          placement="bottom"
          title=""
          :width="300"
          trigger="click"
          content="">
          <template #reference>
            <div>
              <span style="padding-right: 6px;">Booking No</span>
              <el-icon style="vertical-align: middle;"><Search /></el-icon>
            </div>
          </template>
          <el-input
            v-model="filterInputs.bookingNo"
            clearable
            style="max-width: 290px;"
            placeholder="Please input"
            class="input-with-select"
          >
            <template #append>
              <div class="search-wrapper" @click="handleFilter('bookingNo', filterInputs.bookingNo)">
                <el-icon><Search /></el-icon>
              </div>
            </template>
          </el-input>
        </el-popover>
      </template>
    </el-table-column> 
    <el-table-column prop="channel" label="Booking Channel" width="200" v-if="isShowColumn('channel')">
      <template #header>
        <el-popover
          placement="bottom"
          title=""
          :width="300"
          trigger="click"
          content=""
        >
          <template #reference>
            <div>
              <span style="padding-right: 6px;">Booking Channel</span>
              <el-icon style="vertical-align: middle;"><Search /></el-icon>
            </div>
          </template>
          <el-input
            v-model="filterInputs.channel"
            clearable
            style="max-width: 290px;"
            placeholder="Please input"
            class="input-with-select"
          >
            <template #append>
              <div class="search-wrapper" @click="handleFilter('channel', filterInputs.channel)">
                <el-icon><Search /></el-icon>
              </div>
            </template>
          </el-input>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column prop="terminal" :label="'Terminal Ground' + '\r\n' + 'Service Provider'" width="160"  v-if="isShowColumn('terminal')">
      <template #header>
        <el-popover
          placement="bottom"
          title=""
          :width="300"
          trigger="click"
          content="">
          <template #reference>
            <div style="display: flex;align-items: center;">
              <div style="padding-right: 6px;">Terminal Ground<br/>Service Provider</div>
              <el-icon style="vertical-align: middle;"><Search /></el-icon>
            </div>
          </template>
          <el-input
            v-model="filterInputs.terminal"
            clearable
            style="max-width: 290px;"
            placeholder="Please input"
            class="input-with-select"
          >
            <template #append>
              <div class="search-wrapper" @click="handleFilter('terminal', filterInputs.terminal)">
                <el-icon><Search /></el-icon>
              </div>
            </template>
          </el-input>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column prop="payer" label="Freight Payable Party" width="200"  v-if="isShowColumn('payer')">
       <template #header>
        <el-popover
          placement="bottom"
          title=""
          :width="300"
          trigger="click"
          content="">
          <template #reference>
            <div style="display: flex;align-items: center;">
              <span style="padding-right: 6px;">Freight Payable Party</span>
              <el-icon style="vertical-align: middle;"><Search /></el-icon>
            </div>
          </template>
          <el-input
            v-model="filterInputs.payer"
            clearable
            style="max-width: 290px;"
            placeholder="Please input"
            class="input-with-select"
          >
            <template #append>
              <div class="search-wrapper" @click="handleFilter('payer', filterInputs.payer)">
                <el-icon><Search /></el-icon>
              </div>
            </template>
          </el-input>
        </el-popover>
      </template>
      </el-table-column>
    <el-table-column prop="shipper" label="Shipper" width="200"  v-if="isShowColumn('shipper')">
      <template #header>
        <el-popover
          placement="bottom"
          title=""
          :width="300"
          trigger="click"
          content="">
          <template #reference>
            <div style="display: flex;align-items: center;">
              <span style="padding-right: 6px;">Shipper</span>
              <el-icon style="vertical-align: middle;"><Search /></el-icon>
            </div>
          </template>
          <el-input
            v-model="filterInputs.shipper"
            clearable
            style="max-width: 290px;"
            placeholder="Please input"
            class="input-with-select"
          >
            <template #append>
              <div class="search-wrapper" @click="handleFilter('shipper', filterInputs.shipper)">
                <el-icon><Search /></el-icon>
              </div>
            </template>
          </el-input>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column prop="consignee" label="Consignee" width="200" v-if="isShowColumn('consignee')">
      <template #header>
        <el-popover
          placement="bottom"
          title=""
          :width="300"
          trigger="click"
          content="">
          <template #reference>
            <div style="display: flex;align-items: center;">
              <span style="padding-right: 6px;">Consignee</span>
              <el-icon style="vertical-align: middle;"><Search /></el-icon>
            </div>
          </template>
          <el-input
            v-model="filterInputs.consignee"
            clearable
            style="max-width: 290px;"
            placeholder="Please input"
            class="input-with-select"
          >
            <template #append>
              <div class="search-wrapper" @click="handleFilter('consignee', filterInputs.consignee)">
                <el-icon><Search /></el-icon>
              </div>
            </template>
          </el-input>
        </el-popover>
      </template>
      </el-table-column>

    <el-table-column prop="notifyParty" label=" Notify Party" width="300"  v-if="isShowColumn('notifyParty')">
      <template #header>
        <el-popover
          placement="bottom"
          title=""
          :width="300"
          trigger="click"
          content="">
          <template #reference>
            <div style="display: flex;align-items: center;">
              <span style="padding-right: 6px;">Notify Party</span>
              <el-icon style="vertical-align: middle;"><Search /></el-icon>
            </div>
          </template>
          <el-input
            v-model="filterInputs.notifyParty"
            clearable
            style="max-width: 290px;"
            placeholder="Please input"
            class="input-with-select"
          >
            <template #append>
              <div class="search-wrapper" @click="handleFilter('notifyParty', filterInputs.notifyParty)">
                <el-icon><Search /></el-icon>
              </div>
            </template>
          </el-input>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column  prop="pol"  label="POL"  width="100"   v-if="isShowColumn('pol')" />
    <el-table-column  prop="pod"  label="POD"  width="100"   v-if="isShowColumn('pod')" />  />
    <el-table-column prop="brand" label="Brand" width="100" v-if="isShowColumn('brand')" />
    <el-table-column prop="model" label="Model"  width="130"  v-if="isShowColumn('model')" />
    <el-table-column prop="cargoType" label="Cargo Type" width="170"  v-if="isShowColumn('cargoType')" >
      <template #default="scope"> 
        <el-form-item v-if="scope.row.id != null" >
          <el-select v-model="scope.row.cargoType" :disabled="scope.row.status == 3"  @change="handleCargo(scope.row)" v-hasPermi="['draft:edit']"> 
            <el-option v-for="item in cargo_type" :key="item.label" :label="item.label" :value="item.label" />
          </el-select> 
          </el-form-item>
      </template>  
    </el-table-column>
    <el-table-column prop="cargoDesc" label="Cargo Description" width="170"  v-if="isShowColumn('cargoDesc')"  />  
    <el-table-column prop="lashingHookFront" :label= "'Lashing Hook'+ '\n' + '  (FRONT)'" width="120"  v-if="isShowColumn('lashingHookFront')" v-hasPermi="['draft:edit']">
      <template #default="scope">		
      <el-form-item v-if="scope.row.id != null">
          <el-select v-model="scope.row.lashingHookFront"   
           :disabled="scope.row.status == 3 || 
            scope.row.channel == null || scope.row.terminal == null || scope.row.shipper == null || scope.row.cargoType == null || scope.row.model== null
             || scope.row.unitLength == null || scope.row.unitWidth == null
             || scope.row.unitHeight == null || scope.row.unitCbm == null"
             @change="handleUpate({id:scope.row.id,lashingHookFront:scope.row.lashingHookFront})" > 
            <el-option v-for="(item, index) in lashHookStatus" :key="item" :label="item" :value="index" />
          </el-select>
          </el-form-item>
      </template> 
    </el-table-column>
  
    <el-table-column prop="lashingHookRear" :label="'Lashing Hook'+ '\n' + '  (REAR)'" width="120"   v-if="isShowColumn('lashingHookRear')" v-hasPermi="['draft:edit']">
      <template #default="scope">
        <el-form-item v-if="scope.row.id != null">
          <el-select v-model="scope.row.lashingHookRear"     
             :disabled="scope.row.status == 3 || 
             scope.row.channel == null || scope.row.terminal == null || scope.row.shipper == null || scope.row.cargoType == null || scope.row.model== null
             || scope.row.unitLength == null || scope.row.unitWidth == null
             || scope.row.unitHeight == null || scope.row.unitCbm == null"
             @change="handleUpate({id:scope.row.id,lashingHookRear:scope.row.lashingHookRear})" > 
            <el-option v-for="(item, index) in lashHookStatus" :key="item" :label="item" :value="index" />
          </el-select>
        </el-form-item>
      </template> 
    </el-table-column>  
  
    <el-table-column prop="carType" :label="'New Vehicle/' + '\n' + 'Used Vehicle'" width="160" :showOverflowTooltip="false" v-if="isShowColumn('carType')" align="center" >
      <template #default="scope">
        <el-form-item v-if="scope.row.id != null">
          <el-select v-model="scope.row.carType"     v-hasPermi="['draft:edit']"
                :disabled="scope.row.status == 3 || 
                scope.row.channel == null || scope.row.terminal == null || scope.row.shipper == null || scope.row.cargoType == null || scope.row.model== null
                  || scope.row.unitLength == null || scope.row.unitWidth == null
                  || scope.row.unitHeight == null || scope.row.unitCbm == null"
                @change="handleUpate({id:scope.row.id,carType:scope.row.carType})"> 
                <el-option v-for="item in carTypes" :key="item" :label="item" :value="item" />
          </el-select> 
         </el-form-item>
      </template> 
    </el-table-column>  
  
    <el-table-column prop="fuelType" label="Fuel Type" width="220"  v-if="isShowColumn('fuelType')">
      <template #default="scope">
      <el-form-item v-if="scope.row.id != null">
          <el-select v-model="scope.row.fuelType"   v-hasPermi="['draft:edit']"
           :disabled="scope.row.status == 3 || 
            scope.row.channel == null || scope.row.terminal == null || scope.row.shipper == null || scope.row.cargoType == null || scope.row.model== null
             || scope.row.unitLength == null || scope.row.unitWidth == null
             || scope.row.unitHeight == null || scope.row.unitCbm == null"
             @change="handleUpate({id:scope.row.id,fuelType:scope.row.fuelType})"> 
            <el-option v-for="item in fuelTypes" :key="item" :label="item" :value="item" />
          </el-select> 
          </el-form-item>
      </template> 
    </el-table-column>   
    <el-table-column prop="totalUnits" label="Total Units" width="120" v-if="isShowColumn('totalUnits')" /> 
    <el-table-column prop="unitLength" label="Length(m)" width="90"   v-if="isShowColumn('unitLength')" /> 
    <el-table-column prop="unitWidth" label="Width(m)" width="90" v-if="isShowColumn('unitWidth')"  />
    <el-table-column prop="unitHeight" label="Height(m)" width="90" v-if="isShowColumn('unitHeight')"  />
    <el-table-column prop="unitCbm" label="Unit Cbm" width="90"  v-if="isShowColumn('unitCbm')" />
    <el-table-column prop="shippingTerms" :label="'Freight' +'\n' +'Rate Term'" width="90"  v-if="isShowColumn('shippingTerms')"  />
    <el-table-column  prop="unitWeight"   label=""  width="150"  v-if="isShowColumn('unitWeight')"  >
      <template #header>
        <span>Unit Weight ({{ unitWeightFilter.text }})</span>
        <el-select
          ref="unitWeightRef"
          v-model="unitWeightFilter"
          class="el-select_dropMenu"
          placeholder="Choose"
          value-key="value"
          @change="handleUnitWeightChange"
          @mouseenter="showUnitWeightMenu"
        >
          <el-option :key="item.value" :label="item.text" :value="item" v-for="item in unitWeightFilterOptions" />
        </el-select>
      </template>
      <template #default="{ row: { unitWeight } }">
        <span>{{ unitWeight ? (unitWeight / unitWeightFilter.value) : '' }}</span>
      </template>
    </el-table-column>      
    <el-table-column prop="totalVolume" :label="'Total Volume'+'\n'+'（cbm）'" width="120"  v-if="isShowColumn('totalVolume')"  />
    <el-table-column prop="totalWeight" :label="'Total Weight'+'\n'+'(kg)'" width="120"  v-if="isShowColumn('totalWeight')"  /> 
    <el-table-column prop="spareLocation" :label="'Spare Parts Location' + '\n' + '（Inside Vehicle / On Deck）'" width="200" align="center" v-if="isShowColumn('spareLocation')"/> 
                     
    <el-table-column prop="blNo" label="B/L No" width="150"  v-if="isShowColumn('blNo')" >
      <template #default="scope">
        <span class="btn-primary" style="font-size: 16px; "  v-hasPermi="['draft:edit']" v-if="scope.row.id != null &&(scope.row.blNo == null || scope.row.blNo == '')" @click="applyBlNo(scope.row)"> Apply</span>
         <span v-else>{{ scope.row.blNo }}</span>
      </template>  
     </el-table-column>
    <el-table-column prop="remark" label="Remarks" width="150"  v-if="isShowColumn('remark')" />
    <el-table-column label="Operation"  fixed="right" width="190" v-hasPermi="['draft:edit']" >
      <template #default="scope">
        <el-button type="text" :style="{color: scope.row.status != 3? '#3a8ee6':''}" v-if="scope.row.id != null" :disabled= "scope.row.status == 3"  @click="editClickEvent(scope.row)">{{ $t("ship.button.edit") }}</el-button>
        <el-button type="text" :style="{color: scope.row.status != 3 ? '#3a8ee6':''}" v-if="scope.row.id != null " :disabled="scope.row.status == 3" @click="removeClickEvent(scope.row)">{{ $t("ship.button.remove") }}</el-button>
        <el-button type="text" :style="{color: scope.row.status == 1 ? '#3a8ee6':''}" v-if="scope.row.id != null" :disabled= "scope.row.status == 3 || scope.row.blNo == null"  @click="handleClose(scope.row.id)">Close</el-button>  
        <el-button type="text" :style="{color: scope.row.status != 3 ? '#3a8ee6':''}" v-if="scope.row.id != null" :disabled= "scope.row.status == 3"  @click="onSplitEvent(scope.row)" >Split</el-button>
      </template>
    </el-table-column>
  </el-table>   
  <pagination
    v-show="total > 0"
    :total="total"
    :page="queryParams.pageNum"
    :limit="queryParams.pageSize"
    @pagination="pageQuery"
    style="float: right"
  />

  <!--下面的对话框-->
  <el-dialog :width="1400" destroy-on-close draggable :title="dialogTitle" v-model="addDialogFormVisible">
    <el-form :model="addFormParam" :rules="addRules" ref="custForm">
      <el-row>
        <el-col :span="6">
          <el-form-item label="Carrier" prop="carrier" label-width="90" required>
            <el-select v-model="addFormParam.carrier" filterable placeholder="Choose" @change="selectCarrier" style="width:300px">
              <el-option :key="item.carrierName" :label="item.carrierName" :value="item.carrierName" v-for="item in carriers">
              </el-option>
            </el-select>
          </el-form-item>
         </el-col>
        
        <el-col :span="6">
          <el-form-item label="Vessel" label-width="120px" prop="vesselName" required>
            <el-select
              v-model="addFormParam.vesselName"
              filterable
              placeholder="choose Vessel"
              @change="selectVessel(addFormParam)"
            >
              <el-option
                :key="item.vesselName"
                :label="item.vesselName"
                :value="item.vesselName"
                v-for="item in vessels"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="Voyage" label-width="120px" prop="voyageNo" required>
            <el-select v-model="addFormParam.voyageNo" filterable placeholder="Choose Voyage" @change="selectNewBookingNoByVoyage">
              <el-option
                :key="item.voyageNo"
                :label="item.voyageNo"
                :value="item.voyageNo"
                v-for="item in voyages"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="Booking No." label-width="120px" prop="bookingNo" required>
            <el-select v-model="addFormParam.bookingNo" filterable placeholder="Choose"  @change="hanleNewBookingNo">
              <el-option :key="item.bookingNo" :label="item.bookingNo" :value="item.bookingNo" v-for="item in bookingApplyNos">
              </el-option>
            </el-select>
          </el-form-item>
         </el-col>
          <!-- <el-col :span="6">
          <el-form-item label="Sales" label-width="120px" prop="salesId" required>
            <el-select
            v-model="addFormParam.salesId"
            filterable
            clearable
            placeholder="choose Sales"
            style="width: 240px"
          >
            <el-option
              v-for="item in sales"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            />
          </el-select>
          </el-form-item>
        </el-col> -->
      </el-row>

      <div class="table-boxs">
        <el-button @click="addItem(addFormParam)" type="primary" plain icon="Plus"  :disabled="!addFormParam.bookingNo">Add Cargo</el-button>
        <br />
        <br />
        <el-form class="table-box1" :rules="rules" ref="formRef" :model="formObj">
          <el-table :data="formObj.recordData" class="detail-table" stripe :border="true">
            <!-- <el-table-column prop="bookingNo" label="Booking No." width="100" align="center">
              <template #default="scope">
                {{ scope.row.bookingNo }}
              </template>
            </el-table-column> -->
            <el-table-column prop="defultRule"  label="Booking Channel" width="220" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.channel'"  
                  required
                  :rules="rules.defultRule"
                >
                  <el-input  autosize v-model="scope.row.channel" class="ipt"   />
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column prop="terminal" :label="'Terminal Ground' + '\n' + 'Service Provider'" width="140" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.terminal'"
                   :rules="rules.defultRule"
                >
                  <el-input type="textarea" autosize v-model="scope.row.terminal" class="ipt" placeholder="Please input" />
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column prop="payer" label="Freight Payable Party" width="220" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.payer'"
                  :rules="rules.defultRule"
                >
                  <el-select v-model="scope.row.payer" filterable >
                    <el-option  :key="item" :label="item"  :value="item"  v-for="item in clients"  />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column prop="shipper" label="Shipper" width="220" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.shipper'"
                   :rules="rules.defultRule"
                >
                  <el-input type="textarea" autosize v-model="scope.row.shipper" class="ipt" style="text-align: center" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="consignee" label="Consignee" width="220" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.consignee'"
                   :rules="rules.defultRule"
                >
                  <el-input type="textarea" autosize v-model="scope.row.consignee" style="text-align: center" />
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column prop="notifyParty" label="Notify Party" width="220" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.notifyParty'"
                  :rules="rules.defultRule"
                >
                  <el-input type="textarea" autosize v-model="scope.row.notifyParty" class="ipt" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="pol" label="POL" width="200" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.pol'"
                   :rules="rules.defultRule"
                >  
                <el-input  v-model="scope.row.pol" class="ipt" readonly/>
                </el-form-item>
              </template>
                  <!-- <el-select v-model="scope.row.pol" filterable @change="hanlePol(scope.row)">
                    <el-option :key="item.portName" :label="item.portName" :value="item.portName" v-for="item in pols"/>
                  </el-select> -->  
            </el-table-column>
            <el-table-column prop="pod" label="POD" width="200" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.pod'"
                   :rules="rules.defultRule"
                >
                  <el-select v-model="scope.row.pod" filterable> 
                    <el-option :key="item.portName" :label="item.portName" :value="item.portName" v-for="item in pods"/>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="brand" label="Brand" width="200" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.brand'"
                  :rules="rules.defultRule"
                >
                  <el-select
                    v-model="scope.row.brand"
                    class="ipt"
                    clearable
                    filterable
                    allow-create
                    @change="handBrand(scope.row.brand)"
                  >
                    <el-option :key="item" :label="item" :value="item" v-for="item in brands" />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="model" label="Model" width="200" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.model'"
                   :rules="rules.defultRule"
                >
                  <el-select v-model="scope.row.model" class="ipt" filterable allow-create @change="handleModel(scope.row)">
                    <el-option :key="item.name" :label="item.name" :value="item.name" v-for="item in models" />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="cargoType" label="Cargo Type" width="200" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.cargoType'"
                   :rules="rules.defultRule">
                  <el-select v-model="scope.row.cargoType"> 
                    <el-option v-for="item in cargo_type" :key="item.label" :label="item.label" :value="item.label" />
                  </el-select> 
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="cargoDesc" label="Cargo Description" width="140" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.cargoDesc'" 
                >
                  <el-input type="textarea" autosize v-model="scope.row.cargoDesc" style="text-align: center" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="lashingHookFront" :label="'Lashing Hook' + '\n' + '(Front)'  " width="120" align="center">
              <template #default="scope">
                <el-form-item>
                <el-select v-model="scope.row.lashingHookFront" filterable placeholder="choose">
                  <el-option :key="index" :label="item" :value="index" v-for="(item, index) in lashHookStatus"> </el-option>
                </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="lashingHookRear" :label="'Lashing Hook' + '\n' + '(Rear)' " width="130px" align="center">
              <template #default="scope">
                <el-form-item>
                <el-select v-model="scope.row.lashingHookRear" filterable placeholder="choose">
                  <el-option :key="index" :label="item" :value="index" v-for="(item, index) in lashHookStatus"> </el-option>
                </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="carType" :label="'New Vehicle /' + '\n' + 'Used Vehicle'" width="120" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.carType'"
                   :rules="rules.defultRule"
                >
                <el-select v-model="scope.row.carType">
                  <el-option :key="item" :label="item" :value="item" v-for="item in carTypes"> </el-option>
                </el-select>
              </el-form-item>  
              </template>
            </el-table-column>
            <el-table-column prop="fuelType" label="Fuel Type" width="180" required align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.fuelType'"
                   :rules="rules.defultRule">
                  <el-select v-model="scope.row.fuelType" filterable>
                    <el-option v-for="item in fuel_type" :key="item.label" :label="item.label" :value="item.label" />
                </el-select>
                </el-form-item> 
              </template>
            </el-table-column>
            <el-table-column prop="unitLength" label="Length(m)" width="150" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.unitLength'"
                   :rules="rules.defultRule">
                  <el-input-number v-model="scope.row.unitLength" class="ipt" :precision="3" :min="0" :max="1000"/>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="unitWidth" label="Width(m)" width="150" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.unitWidth'"
                   :rules="rules.defultRule"
                >
                  <el-input-number v-model="scope.row.unitWidth" class="ipt" :precision="3" :min="0" :max="1000"/>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="unitHeight" label="Height(m)" width="150" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.unitHeight'"
                  :rules="rules.defultRule"
                >
                  <el-input-number v-model="scope.row.unitHeight" class="ipt" :precision="3" :min="0" :max="1000"/>
                </el-form-item>
              </template>
            </el-table-column> 

            <el-table-column prop="unitWeight" :label="'Unit Weight' + '\n' + '(kg)'" width="170" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.unitWeight'"
                   :rules="rules.defultRule"
                >
                  <el-input-number v-model="scope.row.unitWeight" class="ipt" />
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column prop="shippingTerms" :label="'Freight Rate'  + '\n'+ 'Term'" width="120" required align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.shippingTerms'"
                   :rules="rules.defultRule"
                >
                  <el-select v-model="scope.row.shippingTerms" filterable>
                    <el-option v-for="item in freight_rate_term" :key="item.label" :label="item.label" :value="item.label" />
                </el-select>
                </el-form-item> 
              </template>
            </el-table-column>

            <el-table-column prop="totalUnits" label="Total Units" width="170" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.totalUnits'"
                   :rules="rules.defultRule"
                >
                  <el-input-number v-model="scope.row.totalUnits" class="ipt" />
                </el-form-item>
              </template>
            </el-table-column> 
            <!-- <el-table-column prop="spareQty" :label="'Spare Parts ' + '\n' + 'Qty(Pcs)'" width="200" align="center">
              <template #default="scope">
                <el-form-item>
                  <el-input-number v-model="scope.row.spareQty" class="ipt" />
                </el-form-item>
              </template>
            </el-table-column> -->
            <el-table-column prop="spareLocation" :label="'Spare Parts Location' + '\n' + '（Inside Vehicle / On Deck）'" width="200" align="center">
              <template #default="scope">
                <el-form-item>
                  <el-select v-model="scope.row.spareLocation" filterable>
                    <el-option v-for="item in spareParts" :key="item" :label="item" :value="item" />
                </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="spareVolume" :label="'Spare Parts' + '\n' + 'volume（cmdb）'" width="150" align="center">
              <template #default="scope">
                <el-form-item>
                  <el-input-number v-model="scope.row.spareVolume" class="ipt" />
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column prop="spareWeight" :label="'Spare Parts' + '\n' + 'Weight(kg)'" width="170" align="center">
              <template #default="scope">
                <el-form-item>
                <el-input-number v-model="scope.row.spareWeight" class="ipt" />
                </el-form-item>
              </template>
            </el-table-column> -->
            <!-- <el-table-column prop="blNo" label="B/L NO" align="center"> 
              <template #default="scope">
                <el-form-item>
                 <el-input v-model="scope.row.blNo"/>
                </el-form-item>
              </template>
            </el-table-column> -->
            <el-table-column prop="remark" label="Remarks" align="center"  width="200"> 
              <template #default="scope">
                <el-form-item>
                  <el-input v-model="scope.row.remark"/>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="Operation" width="90">
              <template #default="scope">
                <el-button @click="deleteItem(scope.$index)" icon="Delete" />
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">{{ $t("ship.button.cancel") }}</el-button> 
        <el-button type="primary" @click="submitForm">{{ $t("ship.button.submit") }}</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog :width="1400" destroy-on-close draggable :title="dialogTitle" v-model="reviseDialogFormVisible">
    <el-form :model="reviseParam" :rules="addRules" ref="custForm">
      <el-row>
        <el-col :span="6">
          <el-form-item label="Vessel" label-width="120px" prop="vesselName" required>
            <el-select
              v-model="reviseParam.vesselName"
              filterable
              placeholder="choose Vessel"
              @change="selectVessel(reviseParam)" 
            >
              <el-option
                :key="item.vesselName"
                :label="item.vesselName"
                :value="item.vesselName"
                v-for="item in vessels"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="Voyage" label-width="120px" prop="voyageNo" required>
            <el-select v-model="reviseParam.voyageNo" filterable placeholder="Choose Voyage" @change="selectReviseBookingNoByVoyage">
              <el-option
                :key="item.voyageNo"
                :label="item.voyageNo"
                :value="item.voyageNo"
                v-for="item in voyages"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="BOOKING NO" label-width="120px" prop="bookingNo" required>
            <el-select v-model="reviseParam.bookingNo" filterable placeholder="Choose Booking No." @change="hanleBookingNo">
              <el-option
                :key="item.bookingNo"
                :label="item.bookingNo"
                :value="item.bookingNo"
                v-for="item in bookingNos"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <div class="table-boxs">
        <el-button @click="addItem(reviseParam)" type="primary" plain icon="Plus" :disabled="reviseParam.bookingNo == null">Add Cargo</el-button>
        <br />
        <br />
        <el-form class="table-box1" :rules="rules" style="width:4500px" ref="formRef" :model="formObj">
          <el-table :data="formObj.recordData" class="detail-table" stripe :border="true">              
            <el-table-column prop="defultRule"  label="Booking Channel" width="220" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.channel'"  
                  required
                  :rules="rules.defultRule"
                >
                  <el-input   autosize v-model="scope.row.channel" class="ipt" placeholder="Please input" />
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column prop="terminal" :label="'Terminal Ground' + '\n' + 'Service Provider'" width="220" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.terminal'"
                   :rules="rules.defultRule"
                >
                  <el-input type="textarea" autosize v-model="scope.row.terminal" class="ipt"  />
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column prop="payer" label="Freight Payable Party" width="220" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.payer'"
                  :rules="rules.defultRule"
                >
                  <el-select v-model="scope.row.payer" filterable >
                    <el-option  :key="item" :label="item"  :value="item"  v-for="item in clients"  />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column prop="shipper" label="Shipper" width="220" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.shipper'"
                   :rules="rules.defultRule"
                >
                  <el-input type="textarea" autosize v-model="scope.row.shipper" class="ipt" style="text-align: center" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="consignee" label="Consignee" width="220" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.consignee'"
                   :rules="rules.defultRule"
                >
                  <el-input type="textarea" autosize v-model="scope.row.consignee" style="text-align: center" />
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column prop="notifyParty" label="Notify Party" width="220" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.notifyParty'"
                  :rules="rules.defultRule">
                  <el-input type="textarea" autosize v-model="scope.row.notifyParty" class="ipt" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="pol" label="POL" width="200" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.pol'" 
                > 
                <el-input  v-model="scope.row.pol" class="ipt" readonly/>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="pod" label="POD" width="200" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.pod'" 
                > 
                <el-input  v-model="scope.row.pod" class="ipt" readonly/>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="brand" label="Brand" width="200" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.brand'"
                  :rules="rules.defultRule" >
                  <el-select
                    v-model="scope.row.brand"
                    class="ipt"
                    clearable
                    filterable
                    allow-create
                    @change="handBrand(scope.row.brand)" >
                    <el-option :key="item" :label="item" :value="item" v-for="item in brands" />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="model" label="Model" width="200" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.model'"
                   :rules="rules.defultRule"
                >
                  <el-select v-model="scope.row.model" class="ipt" filterable allow-create @change="handleModel(scope.row)">
                    <el-option :key="item.name" :label="item.name" :value="item.name" v-for="item in models" />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="cargoType" label="Cargo Type" width="200" align="center">
              <template #default="scope">
                <el-form-item v-if="scope.row.id != null"
                  :prop="'recordData.' + scope.$index + '.cargoType'"
                   :rules="rules.defultRule">
                  <el-select v-model="scope.row.cargoType" > 
                    <el-option v-for="item in cargo_type" :key="item.label" :label="item.label" :value="item.label" />
                  </el-select> 
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="cargoDesc" label="Cargo Description" width="140" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.cargoDesc'"
                   :rules="rules.defultRule"
                >
                  <el-input type="textarea" autosize v-model="scope.row.cargoDesc" style="text-align: center" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="lashingHookFront" :label="'Lashing Hook' + '\n' + '(FRONT)'  " width="120" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.lashingHookFront'">
                  <el-select v-model="scope.row.lashingHookFront" filterable placeholder="choose">
                    <el-option :key="index" :label="item" :value="index" v-for="(item, index) in lashHookStatus"> </el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="lashingHookRear" :label="'Lashing Hook' + '\n' + '(REAR)' " width="130px" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.lashingHookRear'" 
                >
                  <el-select v-model="scope.row.lashingHookRear" filterable placeholder="choose">
                    <el-option :key="index" :label="item" :value="index" v-for="(item, index) in lashHookStatus"> </el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="carType" :label="'New Vehicle /' + '\n' + 'Used Vehicle'" width="120" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.carType'"
                   :rules="rules.defultRule"
                >
                <el-select v-model="scope.row.carType">
                  <el-option :key="item" :label="item" :value="item" v-for="item in carTypes"> </el-option>
                </el-select>
              </el-form-item>  
              </template>
            </el-table-column>
            <el-table-column prop="fuelType" label="Fuel Type" width="180" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.fuelType'"
                   :rules="rules.defultRule"
                >
                <el-select v-model="scope.row.fuelType" filterable>
                  <el-option v-for="item in fuel_type" :key="item.label" :label="item.label" :value="item.label" />
                </el-select>
                </el-form-item>
                <!-- <el-input    v-model="scope.row.ev"  style="text-align: center;"/> -->
              </template>
            </el-table-column>
            <el-table-column prop="unitLength" label="Length(m)" width="150" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.unitLength'"
                   :rules="rules.defultRule"
                >
                  <el-input-number v-model="scope.row.unitLength" class="ipt" :precision="3" :min="0" :max="1000"/>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="unitWidth" label="Width(m)" width="150" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.unitWidth'"
                   :rules="rules.defultRule"
                >
                  <el-input-number v-model="scope.row.unitWidth" class="ipt" :precision="3" :min="0" :max="1000"/>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="unitHeight" label="Height(m)" width="150" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.unitHeight'"
                  :rules="rules.defultRule"
                >
                  <el-input-number v-model="scope.row.unitHeight" class="ipt" :precision="3" :min="0" :max="1000"/>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="shippingTerms" :label="'Freight Rate'  + '\n'+ 'Term'" width="120" required align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.shippingTerms'" 
                >
                  <el-select v-model="scope.row.shippingTerms" filterable>
                    <el-option v-for="item in freight_rate_term" :key="item.label" :label="item.label" :value="item.label" />
                </el-select>
                </el-form-item> 
              </template>
            </el-table-column> 

            <el-table-column prop="unitWeight" :label="'Unit Weight' + '\n' + '(kg)'" width="170" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.unitWeight'"
                   :rules="rules.defultRule"
                >
                  <el-input-number v-model="scope.row.unitWeight" class="ipt" />
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column prop="totalUnits" label="Total Units" width="170" align="center">
              <template #default="scope">
                <el-form-item
                  :prop="'recordData.' + scope.$index + '.totalUnits'"
                   :rules="rules.defultRule"
                >
                  <el-input-number v-model="scope.row.totalUnits" class="ipt" />
                </el-form-item>
              </template>
            </el-table-column>
                    <!--四舍五入，保留3位小数  -->
            <!-- <el-table-column prop="totalVolume" :label="'total volume' + '\n' + '（cbm）'">
              <template #default="scope">
        
                {{
                  (
                    (scope.row.unitLength || 0) *
                    (scope.row.unitWidth || 0) *
                    (scope.row.unitHeight || 0) *
                    (scope.row.totalUnits || 0)
                  ).toFixed(2)
                }}
              </template>
            </el-table-column> -->
              <!--四舍五入，保留3位小数    -->
            <!-- <el-table-column prop="totalWeight" :label="'total weight' + '\n' + '(kg)'">
              <template #default="scope"> 
                {{ (scope.row.totalUnits || 0) * (scope.row.unitWeight || 0) }}
              </template>
            </el-table-column> -->
            <!-- <el-table-column prop="spareQty" :label="'Spare Parts ' + '\n' + 'Qty(Pcs)'" width="200" align="center">
              <template #default="scope">
                <el-form-item>
                  <el-input-number v-model="scope.row.spareQty" class="ipt" />
                </el-form-item>
              </template>
            </el-table-column> -->
            <el-table-column prop="spareLocation" :label="'Spare Parts Location' + '\n' + '（Inside Vehicle / On Deck）'" width="200" align="center">
              <template #default="scope">
                <el-form-item>
                  <!-- <el-input v-model="scope.row.spareLocation" class="ipt" /> -->
                  <el-select v-model="scope.row.spareLocation" filterable>
                    <el-option v-for="item in spareParts" :key="item" :label="item" :value="item" />
                </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="spareVolume" :label="'Spare' + '\n' + 'Parts' + '\n' + 'volume（cmdb）'" width="170" align="center">
              <template #default="scope">
                <el-form-item>
                  <el-input-number v-model="scope.row.spareVolume" class="ipt" />
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column prop="spareWeight" :label="'Spare Parts' + '\n' + 'Weight(kg)'" width="200" align="center">
              <template #default="scope">
                <el-form-item>
                  <el-input-number v-model="scope.row.spareWeight" class="ipt" />
                </el-form-item>
              </template>
            </el-table-column> -->
            <el-table-column prop="remark" label="Remarks" align="center" width="200"> 
              <template #default="scope">
                <el-form-item>
                  <el-input v-model="scope.row.remark"/>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="Operation" width="160" align="center">
              <template #default="scope">
                <el-button @click="deleteItem(scope.$index)" icon="Delete" />
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="reviseDialogFormVisible = false">{{ $t("ship.button.cancel") }}</el-button> 
        <el-button type="primary" @click="submitReviseForm">{{ $t("ship.button.submit") }}</el-button>
      </span>
    </template>
  </el-dialog>
  
  <el-dialog class="edit_dialog" destroy-on-close draggable :title="dialogTitle" v-model="dialogFormVisible">
    <el-form :model="formParam" :rules="rules" ref="custForm" class="edit-form-dialog">
      <!-- 第一行 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="Booking No" label-width="170px" prop="bookingNo" required>
            <el-input v-model="formParam.bookingNo" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="B/L No" label-width="170px" prop="blNo">
            <el-input v-model="formParam.blNo"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="Booking Channel" label-width="170px" prop="channel" required>
            <el-input v-model="formParam.channel"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Freight Payable Party" label-width="170px" prop="payer">
            <el-select v-model="formParam.payer" filterable>
              <el-option :key="item" :label="item" :value="item" v-for="item in clients" />
            </el-select>
          </el-form-item>
        </el-col> 
      </el-row>
      <!-- 第三行 -->
      <el-row>
         <el-col :span="12">
          <el-form-item label="Terminal Ground Service Provider" label-width="220px" prop="terminal" required>
            <el-input type="textarea" v-model="formParam.terminal"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Shipper" label-width="170px" prop="shipper" required>
            <el-input type="textarea" v-model="formParam.shipper"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第四行 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="Consignee" label-width="170px" prop="consignee" required>
            <el-input type="textarea" v-model="formParam.consignee"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Notify Party" label-width="170px" prop="notifyParty" required>
            <el-input type="textarea" v-model="formParam.notifyParty"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第五行 -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="POL" label-width="170px" prop="pol" required>
            <el-select v-model="formParam.pol" filterable @change="hanlePol(formParam)">
              <el-option :key="item.portName" :label="item.fullPortName" :value="item.portName" v-for="item in pols" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="POD" label-width="170px" prop="pod" required>
            <el-select v-model="formParam.pod" filterable>
              <el-option :key="item.portName" :label="item.fullPortName" :value="item.portName" v-for="item in pods" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Brand" label-width="170px" prop="brand" required>
            <el-select v-model="formParam.brand" filterable @change="handBrand(formParam.brand)" clearable allow-create>
              <el-option :key="item" :label="item" :value="item" v-for="item in brands" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第六行 -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="Model" label-width="170px" prop="model" required>
            <el-select v-model="formParam.model" class="ipt" filterable allow-create @change="handleModel(formParam)">
              <el-option :key="item.name" :label="item.name" :value="item.name" v-for="item in models" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Cargo Type" label-width="170px" prop="cargoType">
            <el-select v-model="formParam.cargoType">
              <el-option v-for="item in cargo_type" :key="item.label" :label="item.label" :value="item.label" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Cargo Description" label-width="170px" prop="cargoDesc">
            <el-input v-model="formParam.cargoDesc"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第七行 -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="Lashing Hook (Front)" label-width="170px" prop="lashingHookFront">
            <el-select v-model="formParam.lashingHookFront" filterable>
              <el-option :key="index" :label="item" :value="index" v-for="(item, index) in lashHookStatus" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Lashing Hook (Rear)" label-width="170px" prop="lashingHookRear">
            <el-select v-model="formParam.lashingHookRear" filterable>
              <el-option :key="index" :label="item" :value="index" v-for="(item, index) in lashHookStatus" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="New Vehicle / Used Vehicle" label-width="170px" prop="carType"
            v-if="formParam.cargoType!='Parts'" required>
            <el-select v-model="formParam.carType" filterable>
              <el-option :key="item" :label="item" :value="item" v-for="item in carTypes" />
            </el-select>
          </el-form-item>
          <el-form-item label="New Vehicle / Used Vehicle" label-width="170px" prop="carType" v-else>
            <el-select v-model="formParam.carType" filterable>
              <el-option :key="item" :label="item" :value="item" v-for="item in carTypes" />
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>
      <!-- 第八行 -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="Length(m)" label-width="170px" prop="unitLength" required>
            <el-input-number v-model="formParam.unitLength" :precision="3" :min="0" :max="100" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Width(m)" label-width="170px" prop="unitWidth" required>
            <el-input-number v-model="formParam.unitWidth" :precision="3" :min="0" :max="100" style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Height(m)" label-width="170px" prop="unitHeight" required>
            <el-input-number v-model="formParam.unitHeight" :precision="3" :min="0" :max="100" style="width: 100%;"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第九行 -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="Unit Weight (kg)" label-width="170px" prop="unitWeight" required>
            <el-input type="number" v-model="formParam.unitWeight" :min="0" :max="100000" style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Total Nnits" label-width="170px" prop="totalUnits" required>
            <el-input-number v-model="formParam.totalUnits" :min="0" :max="10000" style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Fuel Type" label-width="170px" prop="fuelType" v-if="formParam.cargoType!='Parts'"
            required>
            <el-select v-model="formParam.fuelType" filterable placeholder="Fuel Type ">
              <el-option :key="item" :label="item" :value="item" v-for="item in fuelTypes" />
            </el-select>
          </el-form-item>
          <el-form-item label="Fuel Type" label-width="170px" prop="fuelType" v-else>
            <el-select v-model="formParam.fuelType" filterable>
              <el-option :key="item" :label="item" :value="item" v-for="item in fuelTypes" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第十行 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="Spare Parts Location（Inside Vehicle / On Deck）" label-width="280px" prop="spareLocation">
            <el-select v-model="formParam.spareLocation" filterable>
              <el-option v-for="item in spareParts" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Freight Rate Term" label-width="170px" prop="shippingTerms">
            <el-select v-model="formParam.shippingTerms" filterable>
                <el-option v-for="item in freight_rate_term" :key="item.label" :label="item.label" :value="item.label" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第十一行 -->
      <el-row>
  
        <el-col :span="24">
          <el-form-item label="Remarks" label-width="170px" prop="remark">
            <el-input v-model="formParam.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">{{ $t("ship.button.cancel") }}</el-button>
          <el-button type="primary" @click="submitForm">{{ $t("ship.button.submit") }}</el-button>
        </span>
      </template>
    </el-dialog>    


    <el-dialog class="edit_dialog" destroy-on-close draggable :title="dialogTitle" v-model="viewDialogFormVisible">
      <el-form :model="formParam"   ref="custForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="Booking No" label-width="200px" prop="bookingNo" required>
                {{ formParam.bookingNo }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Bl No" label-width="170px" prop="blNo" required>
              {{ formParam.blNo }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="Booking channel" label-width="200px" prop="channel" >
              {{ formParam.channel }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Terminal Ground Service Provider" label-width="170px" prop="terminal" required>
              {{ formParam.terminal }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="Freight Payable Party" label-width="170px" prop="payer" required>
              {{ formParam.payer }} 
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Shipper" label-width="170px" prop="shipper" required>
              {{ formParam.shipper }} 
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="Consignee" label-width="120px" prop="consignee" required>
              {{ formParam.consignee }} 
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Notify Party" label-width="120px" prop="notifyParty" required>
              {{ formParam.notifyParty }} 
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="POL" label-width="120px" prop="pol" required>
              {{ formParam.pol }} 
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="POD" label-width="120px" prop="pod" required>
                  {{ formParam.pod }}  
            </el-form-item>
          </el-col>
      
          <el-col :span="8">
            <el-form-item label="brand" label-width="200px" prop="brand" required>
              {{ formParam.brand }} 
            </el-form-item>
          </el-col> 
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="model" label-width="120px" prop="model" required>
              {{ formParam.model }} 
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="Cargo Type" label-width="120px" >
              {{ formParam.cargoType }} 
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="Cargo Description" label-width="120px" prop="cargoDesc">
              {{ formParam.cargoDesc }} 
            </el-form-item>
          </el-col>
        </el-row> 

        <el-row>
          <el-col :span="12">
            <el-form-item label="New Car / Used Car" label-width="120px" prop="carType">
               {{ formParam.carType }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="FuelType" label-width="120px" prop="fuelType" required>
              {{ formParam.fuelType }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="Length(m)" label-width="120px" prop="unitLength" required>
               {{ formParam.unitLength }} 
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="Width(m)" label-width="120px" prop="unitWidth" required>
              {{ formParam.unitWidth }} 
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="Height(m)" label-width="120px" prop="unitHeight" required>
              {{ formParam.unitHeight }} 
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <!-- <el-col :span="8">
            <el-form-item label="unit cbm" label-width="120px">
              <template>
                {{ (formParam.unitLength * formParam.unitHeight * formParam.unitWidth).toFixed(2) }}
              </template>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="unit weight (kg)" label-width="120px" prop="unitWeight"  >
              <template default="scope">
                <el-dropdown>
                  <span class="el-dropdown-link">
                    {{ scope.column.unitWeight }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                        <el-dropdown-menu default="dropdown">
                          <el-dropdown-item>Kg</el-dropdown-item>
                          <el-dropdown-item>Dun</el-dropdown-item> 
                        </el-dropdown-menu>
                </el-dropdown>
          </template> 
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="total units" label-width="120px" prop="totalUnits" required>
              {{ formParam.totalUnits }} 
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="total volume（cbm）" label-width="200px">
              <template>
                {{ (formParam.unitLength * formParam.unitHeight * formParam.unitWidth * formParam.totalUnits).toFixed(2) }}
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Total Weight (kg)" label-width="200px" prop="totalWeight" required>
              <template>
                {{ ((formParam.totalUnits || 0) * (formParam.unitWeight || 0)).toFixed(2) }}
              </template> 
            </el-form-item>
          </el-col>
        </el-row> -->

        <el-row>
          <!-- <el-col :span="12">
            <el-form-item label="Spare Parts Qty （Pcs)" label-width="170px" >
              {{ formParam.spareQty }} 
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="Spart Parts Location（in cab / on deck）" label-width="230px" prop="spareLocation">
              {{ formParam.spareLocation }} 
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="Spare Parts volume(cbm)" label-width="200px" prop="spareVolume">
               {{formParam.spareVolume}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Spare Parts Weight(kg)" label-width="200px" prop="spareLocation">
              {{formParam.spareLocation}}
            </el-form-item>
          </el-col>
        </el-row> -->
        <!-- <el-row>
      <el-col :span="12">
        <el-form-item label="B/L NO. 提单号" label-width="120px" prop="totalVolume">
          <el-input type="number" v-model="formParam.spareVolume" disabled />
        </el-form-item>
      </el-col>
    </el-row> -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="Remarks" label-width="120px" prop="remark">
              {{formParam.remark}}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      
    </el-dialog>  
    <!-- 自定义表格列配置 -->
 <el-dialog
      title="Cargo List Columns"
      v-model="columnConfigDialogVisible"
      width="800px"
      draggable
      :before-close="() => columnConfigDialogVisible = false"
    >
      <div class="transfer-container">
        <el-transfer
          v-model="transferVisibleColumns"
          :data="transferData"
          :titles="['Visible Columns', 'Hidden Columns']"
          :filterable="true"
          :filter-method="filterMethod"
          filter-placeholder="Search columns..."
          class="column-transfer"
        >
          <template #default="{ option }">
            <div class="transfer-item">
              <span>{{ option.label }}</span>
              <div class="transfer-actions" v-if="!transferVisibleColumns.includes(option.key)">
                <el-button
                 link
                  :icon="ArrowUp"
                  @click="moveColumnUp(option.key)"
                  :disabled="getColumnIndexInVisible(option.key) === 0"
                  size="small"
                />
                <el-button
                  link
                  :icon="ArrowDown"
                  @click="moveColumnDown(option.key)"
                  :disabled="getColumnIndexInVisible(option.key) == defaultTableColumns.length-1 "
                  size="small"
                />
              </div>
            </div>
          </template>
        </el-transfer>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button text-align="left" @click="resetColumnsConfig">Reset to Default</el-button>
          <el-button @click="columnConfigDialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="saveColumnsConfigFromTransfer">Apply</el-button>
        </span>
      </template>
    </el-dialog>
  <FileUploadStep ref="fileUploadRef" :templateFile="templateFile" :url="downTemplateUrl" 
    :isAlink="false" :queryParams="queryParams" 
    :uploadFileUrl="uploadFileUrl" 
    :fileType="fileType" 
     @update:modelValue="updateFileUpload"  />
  <BookingNoApplyModal ref="applyFormModalRef" />
  <SplitModal ref="splitModal" @success="onSuceess" />
</div>  
</template>
<script lang="ts" setup>
// @ts-nocheck

import { ref, onMounted, reactive, readonly, computed, nextTick } from "vue"; 
import { useRouter } from 'vue-router';
import service from "@/utils/request"; 
import {downloadFile} from '@/utils/downloadFile'  
import { getUserByRoleApi, deleteApi, historyApi } from '@/api/booking/unfreighted'; 
import BookingNoApplyModal from './apply/BookingNoApplyModal.vue'
import { useTableDrag } from '@/hooks/useHooks'
import moment from "moment";
import { filterTableData } from '@/utils/common';
import { 
  // ... existing imports ...
  saveTableColumnsConfig,
  getTableColumnsConfig,
  resetTableColumnsConfig,
  sortTableColumns,
  type TableColumnConfig
} from '@/utils/tableConfig';
const { tableRef, proxy } = useTableDrag();

import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
import { ArrowUp, ArrowDown, Setting } from '@element-plus/icons-vue';
import SplitModal from "./modules/SplitModal.vue"; 
// 定义过滤条件
const tableFilters = reactive<TableFilter[]>([]);
const spareParts = ["Inside Vehicle","On Deck"]
const loading = ref(false)

const router = useRouter();
let uploadFileUrl = "/shipping/booking/uploadFile"
const templateFile = "booking.xlsx"
// 重量单位换算
const unitWeightRef = ref(null)
const unitWeightFilter = ref({ text: 'kg', value: 1 });
const unitWeightFilterOptions = reactive([{ text: 'kg', value: 1 }, { text: 'ton', value: 1000 }]);
const handleUnitWeightChange = (item: any) => {
  unitWeightFilter.value = item
}
const showUnitWeightMenu = () => {
unitWeightRef?.value?.toggleMenu()
}

const onSuceess = ()=>{
  refreshTable()
}

let tableRowClassName=(row)=> {
    for (const rs of selectList.value) {
		if (row.row.id === rs.id) 
		{
		  return 'warning_row';
		} 
    }
	return '';
}


// 删除选择销售
const deleteRoleRef= ref(null);
let deleteRoleVisible = ref(false);
let deleteRoleForm = ref({ userId: '', id: '' });
const roleFormRules = ref({
userId: [{ required: true, message: "user is required" }],
});
let sales = reactive([]);
const getRoleList = () => {
  getUserByRoleApi({ roleName: 'sales' }).then((res: any) => {
    sales = (res.data || []).map(({ id, username }) => ({ id, username }))
  })
}
const submitDeleteForm = () => {
deleteRoleRef.value.validate(valid => {
  if (valid) {
    deleteApi(deleteRoleForm.value).then(() => {
      deleteRoleVisible.value = false;
      refreshTable();
      // @ts-ignore
      ElNotification.success({
        title: "Prompt information",
        message: "Delete successfully!",
        position: "bottom-right"
      });
    })
  }
})  
}
// 拆单操作
const onSplitEvent = (row: any) => {
const totalUnits = Number(row.totalUnits)
if (totalUnits >= 2) {
  proxy.$refs['splitModal'].onInit({ ...row, totalUnits });
} else {
  ElMessage({
    message: "The number of units must be greater than 1",
    type: "warning"
  });
}
}

const handleCargo =async (row)=>{
ElMessageBox.confirm("Confirm to update Cargo Type？", "Confirmation Information", {
  type: "warning",
  confirmButtonText: "Confirm",
  cancelButtonText: "Cancel"
}).then(async () => {
  let params = {id:row.id,cargoType:row.cargoType}  ;
  await service.put(`shipping/booking/updateBooking`, params);
  ElNotification.success({
    title: "Prompt information",
    message: "update booking cargoType success!",
    position: "bottom-right"
  }); 
});
}

const handleUpate =async (params)=>{
ElMessageBox.confirm("Confirm to update ？", "Confirmation Information", {
  type: "warning",
  confirmButtonText: "Confirm",
  cancelButtonText: "Cancel"
}).then(async () => {
  
  await service.put(`shipping/booking/updateBooking`, params);
  ElNotification.success({
    title: "Prompt information",
    message: "Update success!",
    position: "bottom-right"
  }); 
});
}

// 行展开
let expands = ref([])
const handleExpandChange = (row: any, expandedRows: any) => {
if (expandedRows.length && expandedRows.find((item: any) => item.seqNo === row.seqNo)) {
  historyApi(row.id).then((res: any) => {
    row.children = res.data || []
  })
  expands.value = expandedRows.map((item: any) => item.seqNo)
}
}
const historyClickEvent = (row: any) => {
const expandedIds = expands.value.filter((item: any) => item.seqNo!== row.seqNo)
expands.value = [...expandedIds, row.seqNo]
const expandedRows = expands.value.map((seqNo: any) =>  ({ seqNo }))
handleExpandChange(row, expandedRows)
}
const openexpand = (that,row) => {
if(row["isopen"] &&row["isopen"]==1){
     row["isopen"]=0
      const expandedIds = expands.value.filter((item: any) => item.seqNo=== row.seqNo)
   expands.value = [...expandedIds]	
}else{
      row["isopen"]=1
    historyApi(row.id).then((res: any) => {
    row.children = res.data || []
  })
   const expandedIds = expands.value.filter((item: any) => item.seqNo!== row.seqNo)
   expands.value = [...expandedIds, row.seqNo]	
} 
};

const getCellClassName = (originRow: any, row: any, column: any, rowIndex: any, columnIndex: any) => {
// 对比 行数据和当前行数据是否相等，相等则返回类名
// @ts-ignore
if (row[column.property] !== originRow[column.property]) {
  return 'cell-bg-color'; // 为第一行第二列的单元格添加类名
}
return '';
}

const handleClose = async(id)=>{
ElMessageBox.confirm("CONFIRM CLOSED？", "Confirmation Information", {
  type: "warning",
  confirmButtonText: "Confirm",
  cancelButtonText: "Cancel",
}).then(async () => {
   await service.put(`shipping/booking/close/${id}`)
   ElNotification.success({
    title: "Prompt information",
    message: "close booking success!",
    position: "bottom-right"
  });
  refreshTable()
})
}
const custForm = ref(null);
const dialogTitle = ref("");
const initForm = {
id: null,
bookingNo: null,
vesselName: null,
vesselCode: null,
voyageNo: null,
carrier: null,
carrierCode: null, 
channel: null,
terminal: null,
payer: null,
shipper: null,
consignee: null,
notifyParty: null,
pol: null,
portCode: null,
pod: null,
brand: null,
model: null,
cargoType: null,
cargoDesc: null,
lashingHookFront: null,
lashingHookRear: null,
carType: null,
fuelType: null,
unitLength: null,
unitWidth: null,
unitHeight: null,
unitCbm: null,
unitWeight: null,
totalUnits: null,
totalWeight: null,
totalVolume: null, 
spareLocation: null, 
remark: null,
shippingTerms: null,
blNo: null,
bookingStatus:null,
bookings: [] as any
};

const initForm1 = {
id: null,
carrier: null,
carrierCode: null,
voyageNo: null,  
vesselName: null,
vesselCode: null,
portCode: null,
salesId: null,
bookings: [] as any
};
const formParam = reactive(Object.assign({}, initForm));
const addFormParam = reactive(Object.assign({}, initForm1));
const reviseParam = reactive(Object.assign({}, initForm));
const total = ref(0);

const rules = ref({
carrier: [{ required: true, message: "carrier is required" }],
voyageNo: [{ required: true, message: "voyage is required" }],
defultRule:[
  {
    required: true,
    message: 'Mandatory Field'
  }
]
});

const addRules = ref({
carrier: [{ required: true, message: "carrier is required" }],
voyageNo: [{ required: true, message: "voyage is required" }],
defultRule:[
  {
    required: true,
    message: 'Mandatory Field'
  }
]
});

let bookingNos =reactive([])
let bookingApplyNos =reactive([])
const lashHookStatus = [ "No","Yes"];
const carTypes = ["New", "Used"];
const fuelTypes = ["Non-EV", "BEV", "HEV", "PHEV", "EREV", "FCV", "EV", "OTHER"];

const queryParams = reactive({
pageNum: 1,
pageSize: 20,
id: null,
vesselName: null,
voyageNo: null, 
status: null,
bookingNo:null,
pols:[] as any,
pods:[] as any,
channel:null,
shipper:null,
orderByColumn: undefined,
isAsc: undefined
});

const freightRateTerms = ["FLT","FIO","FILO","LIFO"]
let carriers = ref([] as any);
let brands = ref([]);
let clients = reactive([])
let models = ref([] as any);
let vessels = reactive([] as any);
let voyages = reactive([] as any);
let statuss = ["draft", "confirmed","waiting list"]
let fullStatus = ["draft", "confirmed","waiting list","close"]
let fullStatusSelect = ["confirmed","waiting list","close"]
let disableStatus =[0,3]
let ports = ref([] as any);
let recordData = ref([] as any);
const listData = ref([] as any);
let pols = ref([] as any);
let pods = ref([] as any);


// book channel过滤 
let bookChannelInput = ref('')
let sureBookChannelInput = ref('')
// book no 过滤
let bookNoInput = ref('')
let sureBookNoInput = ref('')
let blNoInput = ref("")

const handleChannelFilter = () => {
  bookNoInput.value = ''
  sureBookNoInput.value = ''
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 1500)
  sureBookChannelInput.value = bookChannelInput.value.trim()
}

const handleNoFilter = () => {
  sureBookChannelInput.value = ''
  bookChannelInput.value = ''
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 1500)
  sureBookNoInput.value = bookNoInput.value.trim()
}

// 用于存储各列的过滤输入值
const filterInputs = reactive({
  bookingNo: '',
  channel: '',
  terminal: '',
  payer: '',
  shipper: '',
  consignee: '',
  notifyParty: '',
  // 可以添加其他需要过滤的列
});

// 处理过滤
const handleFilter = (column: string, value: any, type: string = 'contains') => {
  addFilter(column, value, type);
};

// 处理清除过滤
const handleClearFilter = (column: string) => {
  clearFilter(column);
  filterInputs[column] = '';
};
// 表格列数据筛选
const filterListData = computed(() => {
  let list = [...listData.value];
  // if (sureBookChannelInput.value) {
  //   list = list.filter(item => item.channel && item.channel.includes(sureBookChannelInput.value))
  // }
  // if (sureBookNoInput.value) {
  //   list = list.filter(item => item.bookingNo && item.bookingNo.includes(sureBookNoInput.value))
  // }
  // if(blNoInput.value){
  //    list = list.filter(item => item.blNo && item.blNo.includes(blNoInput.value))
  // }
  // 使用通用过滤方法
  if (tableFilters.length > 0) {
    list = filterTableData(list, tableFilters);
  }
  return list
})

// 添加或更新过滤器
const addFilter = (column: string, value: any, type: string = 'contains') => {
  const existingFilterIndex = tableFilters.findIndex(f => f.column === column);
  
  if (existingFilterIndex >= 0) {
    // 更新现有过滤器
    if (value === null || value === undefined || value === '') {
      // 如果值为空，移除过滤器
      tableFilters.splice(existingFilterIndex, 1);
    } else {
      // 否则更新过滤器值
      tableFilters[existingFilterIndex] = { column, value, type };
    }
  } else if (value !== null && value !== undefined && value !== '') {
    // 添加新过滤器
    tableFilters.push({ column, value, type });
  }
};
// 清除指定列的过滤器
const clearFilter = (column: string) => {
  const index = tableFilters.findIndex(f => f.column === column);
  if (index >= 0) {
    tableFilters.splice(index, 1);
  }
};

// 清除所有过滤器
const clearAllFilters = () => {
  tableFilters.length = 0;
};
const initDataNumber=ref(1) 
const initListData=ref([])
let port1 = reactive([] as any)
let port2 = reactive([] as any)
const refreshTable =  () => {  
  loading.value=true 
  let querys  = JSON.parse(JSON.stringify(queryParams)) 
  if(querys.pols != null &&  querys.pols.length > 0){
    querys.pols  = querys.pols.join(",")
  }else{
    querys.pols = null
  }
  if(querys.pods != null &&  querys.pods.length > 0){
    querys.pods  = querys.pods.join(",")
  }else{
    querys.pods = null
  }
 
  let result =  service.get("/shipping/booking/bookingList", {params:querys}).then((result) => {
    let seqNo = 0
    if(querys.pageNum > 1){
      seqNo = 1
    }

    listData.value = result.data.map((item: any) => {
      item.seqNo = seqNo ++
      return { ...item, children: [] }
    });	 
    loading.value= false
    total.value = result.total 
});	  
};
const disabled=ref(false)

// pol筛选过滤
let polsFilter = ref([] as any);
let podsFilter = ref([] as any);
const filterHandler = (value, row, column) => {
  const property = column['property']
  return row[property] === value
}

const dialogFormVisible = ref(false); 
const addDialogFormVisible = ref(false);
const reviseDialogFormVisible = ref(false);
const viewDialogFormVisible = ref(false);
const editClickEvent = (row: any) => {
dialogTitle.value = "Update Booking";
dialogFormVisible.value = true;
Object.keys(initForm).forEach(k => (formParam[k] = row[k]));
isAdd = false;
};

let index = 1;
let isAdd = false;

const handleRowDblclick=(row:any)=>{
  dialogTitle.value = "View Booking";
  viewDialogFormVisible.value = true;
  Object.keys(initForm).forEach((k) => (formParam[k] = row[k]));
  isAdd = false;
}

const addClickEvent = () => { 
  dialogTitle.value = "Create New Booking";
  isAdd = true;
  addDialogFormVisible.value = true;
  addFormParam.bookingNo = null

  Object.assign(addFormParam, initForm1);
  addFormParam.carrier=carriers.value[0].carrierName
  addFormParam.carrierCode=carriers.value[0].carrierCode
  formObj.value.recordData = []; 
};

const reViseClickEvent = async()=>{   
  dialogTitle.value = "Revise Present Booking";
  isAdd = true;
  reviseDialogFormVisible.value = true;
  Object.assign(reviseParam, initForm1);
  reviseParam.carrier=carriers.value[0].carrierName
  reviseParam.carrierCode=carriers.value[0].carrierCode  
  formObj.value.recordData = []; 
}

const handleExport = ()=>{ 
downloadFile('shipping/booking/exportTemplate',queryParams, `booking.xlsx`)
} 

const hanleBookingNo = async()=>{
  let item =bookingNos.find(n=>n.bookingNo == reviseParam.bookingNo)

  if(item){
    reviseParam.pol = item.pol
    reviseParam.pod = item.pod
    reviseParam.portCode = item.portCode
    reviseParam.voyageNo = item.voyageNo
    reviseParam.carrier = item.carrier
    reviseParam.brand = item.brand 
 
    if (brands.value.includes(item.brand )) {
      let params = { brand: item.brand };
      let result = await service.get("/shipping/vehicleModel/getByBrand", {
        params: params
      });
      models.value = result.data; 
    }
    
    reviseParam.carrierCode = item.carrierCode
    reviseParam.vesselName = item.vesselName
    reviseParam.vesselCode = item.vesselCode
    reviseParam.salesId = item.salesId
    //reviseParam.blNo = item.blNo 
  }
}

const hanleNewBookingNo = async()=>{
let item =bookingApplyNos.find(n=>n.bookingNo == addFormParam.bookingNo) 
  if(item){
    addFormParam.pol = item.pol
    addFormParam.pod = item.pod
    addFormParam.brand = item.brand
   
    addFormParam.portCode = item.portCode
    addFormParam.voyageNo = item.voyageNo  
    addFormParam.vesselName = item.vesselName
    addFormParam.vesselCode = item.vesselCode 
    addFormParam.salesId = item.salesId
  }

}
const resetForm = () => {
// @ts-ignore
custForm.value.resetFields();
};

const submitForm = () => { 
// @ts-ignore
custForm.value.validate(async valid => {
  if (!valid) {
    // @ts-ignore
    ElNotification.warning({
      title: "Prompt information",
      message: "verification not success！",
      position: "bottom-right"
    });
    return;
  }


  // 统一处理数据
  if (isAdd) {
    // 二次校验，底部表单数据
    // @ts-ignore
    formRef.value.validate(async valid => {
      if (!valid) {
        // @ts-ignore
        ElNotification.warning({
          title: "Prompt information",
          message: "verification not success！",
          position: "bottom-right"
        });
        return;
      }else{

        if(formObj.value.recordData.length === 0){
        ElNotification.warning({
          title: "Prompt information",
          message: "data must input！",
          position: "bottom-right"
        });
        return;
    }
      formObj.value.recordData.forEach((item: any )=> { 
        item.pol = addFormParam.pol
        //item.pod = addFormParam.pod
        item.portCode =  addFormParam.portCode 
        item.voyageNo = addFormParam.voyageNo 
        item.vesselName = addFormParam.vesselName 
        item.vesselCode =  addFormParam.vesselCode 
        item.salesId = addFormParam.salesId
        //bookingNo: 船名短代码+港口代码 +年份+顺序号
        item.unitCbm = (item.unitLength * item.unitWidth * item.unitHeight).toFixed(3);
        item.totalVolume = (item.unitCbm * item.totalUnits).toFixed(3);  
        item.totalWeight = item.totalUnits * item.unitWeight;
      });
      
      addFormParam.bookings = formObj.value.recordData;
      await service["post"]("shipping/booking", addFormParam);
       // @ts-ignore
       ElNotification.success({
        title: "Prompt information",
        message: "save successful!",
        position: "bottom-right"
      });
      addDialogFormVisible.value = false;
      queryParams.bookingNo = addFormParam.bookingNo
      refreshTable()
      } 
    })
  } else {
    //formParam.bookingNo = vesselCode + formParam.pol + "24001";
    
    formParam.unitCbm = (formParam.unitLength * formParam.unitWidth * formParam.unitHeight).toFixed(3);
    formParam.totalVolume = (formParam.unitCbm * formParam.totalUnits).toFixed(3); 
    formParam.totalWeight = formParam.totalUnits * formParam.unitWeight;
    await service[ "put"]("shipping/booking", formParam);
    // @ts-ignore
    ElNotification.success({
      title: "Prompt information",
      message: "save successful!",
      position: "bottom-right"
    });
    dialogFormVisible.value = false;
    refreshTable();
  }  
});
};

const submitReviseForm= ()=>{
// @ts-ignore
formRef.value.validate(async valid => {
    if (!valid) {
      // @ts-ignore
      ElNotification.warning({
        title: "Prompt information",
        message: "verification not success！",
        position: "bottom-right"
      });
      return;
    }else{
      if(formObj.value.recordData.length === 0){
      ElNotification.warning({
        title: "Prompt information",
        message: "data must input！",
        position: "bottom-right"
      });
      return;
  }
    formObj.value.recordData.forEach((item: any )=> {
      //bookingNo: 船名短代码+港口代码 +年份+顺序号
      item.unitCbm = (item.unitLength * item.unitWidth * item.unitHeight).toFixed(3);
      item.totalVolume = (item.unitCbm * item.totalUnits).toFixed(3);

      item.totalWeight = item.totalUnits * item.unitWeight;
    });
    reviseParam.bookings = formObj.value.recordData;
    await service["post"]("shipping/booking", reviseParam);
      // @ts-ignore
      ElNotification.success({
      title: "Prompt information",
      message: "save successful!",
      position: "bottom-right"
    });
    reviseDialogFormVisible.value = false;
    refreshTable()
    } 
  })
}

const pageQuery = async (e) => {
queryParams.pageNum = e.page;
queryParams.pageSize = e.limit;
refreshTable();
};

const hanlePol = async(row:any)=> {
  let item = pols.value.find(n => n.portName == row.pol);

  if (item) {
    row.portCode = item.fullPortCode;
  }

// if (row.pol != null && addFormParam.vesselCode != null) { 
//   let params = {carrierCode:addFormParam.carrierCode, portCode:row.portCode,voyageNo: addFormParam.voyageNo, vesselCode: addFormParam.vesselCode };
//   let result = await service.get("/shipping/booking/getAutoData", { params: params });
//   if (result) {
//     row.bookingNo = result.data.bookingNo; 
//   }
// }
};

const search = () => {  
  if([null, '', undefined].includes(queryParams.vesselName)|| [null, '', undefined].includes(queryParams.voyageNo)){
    ElMessage.warning("Please choose vessel and voyage to query!") 
    return
  } 
 
  refreshTable();
};

const exitClickEvent = ()=>{
  queryParams.vesselName = null
  queryParams.bookingNo = null
  queryParams.voyageNo = null
  queryParams.status = null
  listData.value = []
  total.value = 0
}

const exportClickEvent = async () => {
  downloadFile("/shipping/booking/export", queryParams, `O_${queryParams.vesselName}_${queryParams.voyageNo}_${moment( new Date()).format('YYYYMMDDHHmm')}_booking.xlsx`);
}
const exportClickCNEvent = async () => {
  downloadFile("/shipping/booking/exportCN", queryParams, `O_${queryParams.vesselName}_${queryParams.voyageNo}_${moment( new Date()).format('YYYYMMDDHHmm')}_booking.xlsx`);
}

const exportForAgent = async()=>{ 
  downloadFile("/shipping/booking/exportForAgent", queryParams, `A_${queryParams.vesselName}_${queryParams.voyageNo}_${moment( new Date()).format('YYYYMMDDHHmm')}_booking.xlsx`);
}

const exportForFN = ()=>{
  downloadFile("/shipping/booking/exportForFn", queryParams, `${queryParams.vesselName}_${queryParams.voyageNo}_${moment( new Date()).format('YYYYMMDDHHmm')}_F/N CARGO LIST TEMPLATE.xlsx`);
}
const exportCargoList = ()=>{
  downloadFile("/shipping/booking/exportCargoList", queryParams, `${queryParams.vesselName}_${queryParams.voyageNo}_exportCargoList_${moment( new Date()).format('YYYYMMDDHHmm')}.xlsx`);
}


const uploadFile = async (event:any) => {
if (event.target == null || event.target.files[0] == null) {
  return;
}
const formData = new FormData();
formData.append("file", event.target.files[0]);
await service["post"]("shipping/booking/uploadFile", formData);
 
//refreshTable()
// @ts-ignore
ElNotification.success({
  title: "Prompt information",
  message: "save successful!",
  position: "bottom-right"
});
     
};

const handleSortChange = async (column: any) => {
  queryParams.orderByColumn = column.prop;
  queryParams.isAsc = column.order; //动态取值排序顺序
  refreshTable();
};

const selectVessel =(form)=>{ 
  queryParams.voyageNo = null
  queryParams.pol = null
  queryParams.pod = null
  voyages = []
  pods.value = []
  pols.value = []
  if(form.vesselName != null && form.vesselName != undefined){
    let params = {vesselName: form.vesselName} 
    let item = vessels.find(n=>n.vesselName == form.vesselName) 
    if(item){
      form.vesselCode = item.vesselCode  
      voyages = item.schedules 
    } 
  } 
}

const selectVoyage = async(value)=>{
  queryParams.pol = null
  queryParams.pod = null
  //@ts-ignore
  let item = voyages.find(n=>n.voyageNo ==value) 
  if(item){
    pods.value = item.pods 
    pols.value = item.pols

    // podsFilter.value = item.pods.map(n => {
    //   return {
    //     text: n.portName,
    //     value: n.portName
    //   }
    // })

    // polsFilter.value = item.pols.map(n => {
    //   return {
    //     text: n.portName,
    //     value: n.portName
    //   }
    // })
  }
}

const selectNewBookingNoByVoyage = async()=>{ 
  addFormParam.bookingNo = null
  service.get("/shipping/bookingNoApply/getUnusedBookingNo",{params:addFormParam}).then(res=>{  bookingApplyNos = res.data})
  //@ts-ignore
  let item = voyages.find(n=>n.voyageNo ==addFormParam.voyageNo) 
  if(item){
    pods.value = item.pods 
    pols.value = item.pols
  }
}

const selectReviseBookingNoByVoyage = async()=>{ 
  reviseParam.bookingNo = null
  service.get("/shipping/booking/getBookingNo",{params:reviseParam}).then(res=>{  bookingNos = res.data})
  //@ts-ignore
  let item = voyages.find(n=>n.voyageNo ==reviseParam.voyageNo) 
  if(item){
    pods.value = item.pods 
    pols.value = item.pols
  }
}

const removeClickEvent = ({ id,status,salesId }: any) => {
  ElMessageBox.confirm("Confirm to Remove the data？", "Confirmation Information", {
    type: "warning",
    confirmButtonText: "Confirm",
    cancelButtonText: "Cancel",
  }).then(async () => {
    if(status == 0){
      await service.delete(`shipping/booking/${id}`);
      refreshTable();
    }else{    
    let userId = salesId
    deleteApi({ id, userId }).then(() => {
      refreshTable();
      // @ts-ignore
      ElNotification.success({
        title: "Prompt information",
        message: "Send the delete information to the sales to confirm!",
        position: "bottom-right"
      });
    }) 
  } 
  })
};
const formRef = ref(null);
let formObj = ref({
recordData: []
});

const addItem = async(form) => {     
  if(form.brand != null){
    handBrand(form.brand)
  } 

  formObj.value.recordData.push({
    id: recordData.value.length + 1,
    bookingNo:form.bookingNo,
    channel: "",
    terminal: "",
    payer: "",
    shipper: "",
    consignee: "",
    notifyParty: "",
    pol: form.pol,
    pod: form.pod,
    brand: form.brand,
    model: "",
    cargoDesc: "",
    unitLength: null,
    unitWidth: null,
    unitHeight: null,
    unitCbm: null,
    unitWeight: null,
    totalUnits: null,
    totalVolume: null,
    totalWeight: null,
    spareQty: null,
    spareLocation: null,
    spareVolume: null,
    spareWeight: null,
    blNo: null
  });
};

const deleteItem = (index) => {
  if (formObj.value.recordData != null && formObj.value.recordData.length > 1) {
    formObj.value.recordData.splice(index, 1);
  }
  for (let i in formObj.value.recordData) {
    formObj.value.recordData[i].id = parseInt(i) + 1;
  }
};

const selectCarrier = () => {
  let item = carriers.value.find(n => n.carrierName == addFormParam.carrier);
  if (item) {
    addFormParam.carrierCode = item.carrierCode;
  }
};

const handBrand = async (value) => {
if (brands.value.includes(value)) {
  let params = { brand: value };
  let result = await service.get("/shipping/vehicleModel/getByBrand", {
    params: params
  });
  models.value = result.data; 
}
};

const handleStatus=(row:any)=>{
  if(row.status != null && row.status != 0){
    ElMessageBox.confirm("Confirm to update the Booking Status？", "Confirmation Information", {
        type: "warning",
        confirmButtonText: "Confirm",
        cancelButtonText: "Cancel",
      }).then(async () => {
        let params = {id:row.id,status:row.status}  ;
        await service.put(`shipping/booking/updateBooking`, params);
        ElNotification.success({
          title: "Prompt information",
          message: "update booking status success!",
          position: "bottom-right"
        });
        
      });
  }
}

const handleModel = (row:any) => {
  let item = models.value.find(n => n.brand == row.brand && n.name == row.model); 
  if (item) {
    row.fuelType = item.fuelType;
    row.unitHeight = item.unitHeight;
    row.unitWdith = item.unitWidth;
    row.unitLength = item.unitLength;
  }
};

/* 批量确认 */
const selectable=(row:any)=> {
 return row.status!=3&&row.id
}
const selectList=ref([])
const handleSelectionChange=(val:any)=>{
  selectList.value=val
}
const handleStatusAll=(val)=>{
  if(selectList.value.length > 0){
    ElMessageBox.confirm("Confirm to update the Booking Status？", "Confirmation Information", {
        type: "warning",
        confirmButtonText: "Confirm", 
        cancelButtonText: "Cancel",
    }).then(async () => {
      let ids=selectList.value.map(n=>n.id).join(",")
      await service.put(`shipping/booking/updateStatus/${ids}?status=`+val);
      ElNotification.success({
        title: "Prompt information",
        message: "update booking status success!",
        position: "bottom-right"
      });
      refreshTable();
    });
  }else{
    ElMessage.warning("Please select data to change status!")
  }
 
}
let cargo_type = reactive([])
let fuel_type = reactive([])
let freight_rate_term = reactive([])
onMounted(async () => {
  initTableColumns();
  index=0
  let result = await service.get("/shipping/carrier/list");
  if (result) {
    carriers.value = result.data;
  }

  result = await service.get("/shipping/vessel/getSchedule");
  if (result) {
    vessels = result.data;
  } 

  service.get("/shipping/vehicleModel/brands").then(result=>{
    brands.value = result.data;
  })

  const  res = await proxy.useDict("cargo_type","fuel_type","freight_rate_term");
  cargo_type = res.cargo_type
  fuel_type = res.fuel_type
  freight_rate_term = res.freight_rate_term 
  
  getRoleList()
  service.get("/shipping/client/getAllName").then(res=>{  clients = res.data})   
});
// 导入功能
const downTemplateUrl=ref('shipping/booking/download/template')
const fileType = ref(['.xlsx', '.xls'])
const fileUploadRef=ref(null)
const uploadFileForm=()=>{
proxy.$refs["fileUploadRef"].dialogUploadFileForm()
}
const updateFileUpload= (data: any) => {
ElNotification.success({
        title: "Prompt information",
        message: data,
        position: "bottom-right"
      });
refreshTable();
};

const channelFilters = ['12','13']

const applyBlNo = (row)=>{ 
ElMessageBox.confirm("Confirm to apply BL No？", "Confirmation Information", {
        type: "warning",
        confirmButtonText: "Confirm",
        cancelButtonText: "Cancel",
      }).then(async () => {
  let result = await service.post(`/shipping/booking/applyBlNo/`+row.id );
  if(result){
     row.blNo = result.data
  }
})
}
//申请
const applyFormModalRef=ref(null)
const bookApplyEvent=()=>{
router.push({ path: '/booking/bookingApply', query: { showApplyForm: true } })
}
// const handleScroll = (e) => {
//   const { scrollTop, clientHeight, scrollHeight } = e.target;
//   if (scrollHeight - (scrollTop + clientHeight) <= 200) {
//     loadMoreData();
//   }
// };

/**
* @description 自定义表格
* @param {string} tableId 表格ID，用于标识不同表格的配置
* @param {Array} defaultTableColumns 表格列配置
* @param {Array} tableColumns 表格列配置
* @param {Boolean} columnConfigDialogVisible 表格列配置
*/
// 表格ID，用于标识不同表格的配置
const tableId = 'booking_list_table';
const columnConfigDialogVisible = ref(false);
// 默认表格列配置
const defaultTableColumns: TableColumnConfig[] = [ 
  { prop: 'seqNo', label: 'Item', visible: true, order: 1, width: 120 },
  { prop: 'sales', label: 'Sales', visible: true, order: 2, width: 70 },
  { prop: 'status', label: 'Status', visible: true, order: 3, width: 120 },
  { prop: 'bookingNo', label: 'Booking No.', visible: true, order: 4, width: 120 },
  { prop: 'channel', label: 'Booking Channel', visible: true, order: 5, width: 200 },
  { prop: 'terminal', label: 'Terminal Ground\nService Provider', visible: true, order: 6, width: 160 },
  { prop: 'payer', label: 'Freight Payable Party', visible: true, order: 7, width: 200 },
  { prop: 'shipper', label: 'Shipper', visible: true, order: 8, width: 200 },
  { prop: 'consignee', label: 'Consignee', visible: true, order: 9, width: 200 },
  { prop: 'notifyParty', label: 'Notify Party', visible: true, order: 10, width: 300 },
  { prop: 'pol', label: 'POL', visible: true, order: 11, width: 100 },
  { prop: 'pod', label: 'POD', visible: true, order: 12, width: 100 },
  { prop: 'brand', label: 'Brand', visible: true, order: 13, width: 100 },
  { prop: 'model', label: 'Model', visible: true, order: 14, width: 130 },
  { prop: 'cargoType', label: 'Cargo Type', visible: true, order: 15, width: 170 },
  { prop: 'cargoDesc', label: 'Cargo Description', visible: true, order: 16, width: 170 },
  { prop: 'lashingHookFront', label: 'Lashing Hook\n  (FRONT)', visible: true, order: 17, width: 120 },
  { prop: 'lashingHookRear', label: 'Lashing Hook\n  (REAR)', visible: true, order: 18, width: 120 },
  { prop: 'carType', label: 'New Vehicle/\nUsed Vehicle', visible: true, order: 19, width: 160 },
  { prop: 'fuelType', label: 'Fuel Type', visible: true, order: 20, width: 160 },
  { prop: 'totalUnits', label: 'Total Units', visible: true, order: 21, width: 160 },
  { prop: 'unitLength', label: 'Unit Length', visible: true, order: 22, width: 160 },
  { prop: 'unitWidth', label: 'Unit Width', visible: true, order: 23, width: 160 },
  { prop: 'unitHeight', label: 'Unit Height', visible: true, order: 24, width: 160 },
  { prop: 'unitCbm', label: 'Unit Cbm', visible: true, order: 25, width: 160 },
  { prop: 'totalCbm', label: 'Total Cbm', visible: true, order: 26, width: 160 },
   { prop: 'shippingTerms', label: 'Freight' +'\n' +'Rate Term', visible: true, order: 27, width: 160 },
  { prop: 'unitWeight', label: 'Unit Weight', visible: true, order: 28, width: 160 },
  { prop: 'totalWeight', label: 'Total Weight', visible: true, order: 29, width: 160 },
  { prop: 'totalVolume', label: 'Total Volume', visible: true, order: 30, width: 160 },
  { prop: 'spareLocation', label: 'Spare Parts Location', visible: true, order: 31, width: 160 },
  { prop: 'blNo', label: 'BL No.', visible: true, order: 32, width: 160 },
  { prop: 'remark', label: 'Remark', visible: true, order: 33, width: 160 },
];
// 表格列配置（从本地存储获取或使用默认配置）
const tableColumns = ref<TableColumnConfig[]>([]);
// 初始化表格列配置
const initTableColumns = () => {
  const savedColumns = getTableColumnsConfig(tableId, defaultTableColumns);
  // 确保所有默认列都存在于保存的配置中
  const mergedColumns: TableColumnConfig[] = [];
  
  // 创建一个映射，用于快速查找已保存的列配置
  const savedColumnsMap = new Map(savedColumns.map(col => [col.prop, col]));
  // 合并默认列和保存的列配置
  defaultTableColumns.forEach(defaultCol => {
    const savedCol = savedColumnsMap.get(defaultCol.prop);
    if (savedCol) {
      // 如果已保存配置中存在该列，则使用保存的配置，但保留必填属性
      mergedColumns.push({
        ...savedCol,
        required: defaultCol.required
      });
    } else {
      // 否则使用默认配置
      mergedColumns.push({ ...defaultCol });
    }
  });
  
  tableColumns.value = mergedColumns;
};

// 保存表格列配置
const saveColumnsConfig = () => {
  saveTableColumnsConfig(tableId, tableColumns.value);
  columnConfigDialogVisible.value = false; 
  ElMessage.success('The table column configuration has been saved.');
};

// 重置表格列配置
const resetColumnsConfig = () => {
  ElMessageBox.confirm('Are you sure you want to reset the table column configuration?', 'Confirm', {
    confirmButtonText: 'Yes',
    cancelButtonText: 'No',
    type: 'warning'
  }).then(() => {
    resetTableColumnsConfig(tableId);
    initTableColumns();
    // 添加这行代码，同步更新穿梭框数据
    transferVisibleColumns.value = tableColumns.value
      .filter(col => !col.visible)
      .sort((a, b) => a.order - b.order)
      .map(col => col.prop);
    ElMessage.success('Table column configuration has been reset');
  }).catch(() => {
    // 用户取消重置
    ElMessage.info('Table column configuration reset canceled');
  });
};

// 移动列顺序（上移）
const moveColumnUp = (prop: string) => {
  const index = tableColumns.value.findIndex(col => col.prop === prop);
  if (index > 0) {
    const currentOrder = tableColumns.value[index].order;
    const prevOrder = tableColumns.value[index - 1].order;
    
    // 交换顺序值
    tableColumns.value[index].order = prevOrder;
    tableColumns.value[index - 1].order = currentOrder;
    
    // 重新排序数组
    tableColumns.value = [...tableColumns.value].sort((a, b) => a.order - b.order);
  }
};

// 移动列顺序（下移）
const moveColumnDown = (prop: string) => {
  const index = tableColumns.value.findIndex(col => col.prop === prop);
  if (index < tableColumns.value.length - 1) {
    const currentOrder = tableColumns.value[index].order;
    const nextOrder = tableColumns.value[index + 1].order;
    
    // 交换顺序值
    tableColumns.value[index].order = nextOrder;
    tableColumns.value[index + 1].order = currentOrder;
    
    // 重新排序数组
    tableColumns.value = [...tableColumns.value].sort((a, b) => a.order - b.order);
  }
}
// 穿梭框相关数据
const transferVisibleColumns = ref<string[]>([]);
const transferData = computed(() => {
  return tableColumns.value.map(col => ({
    key: col.prop,
    label: col.label,
    disabled: col.required || false,
    order: col.order
  }));
});

// 获取列在可见列表中的索引
const getColumnIndexInVisible = (prop: string) => {
  console.log('[ prop ] >', prop)
  console.log('[ transferVisibleColumns.value ] >',  defaultTableColumns.findIndex(item => item.prop === prop))
  return defaultTableColumns.findIndex(item => item.prop === prop);
};

// 穿梭框搜索过滤方法
const filterMethod = (query: string, item: any) => {
  return item.label.toLowerCase().includes(query.toLowerCase());
};

// 在穿梭框中上移列
const moveColumnUpInTransfer = (prop: string) => {
  const index = getColumnIndexInVisible(prop);
  if (index > 0) {
    const newVisibleColumns = [...transferVisibleColumns.value];
    const temp = newVisibleColumns[index];
    newVisibleColumns[index] = newVisibleColumns[index - 1];
    newVisibleColumns[index - 1] = temp;
    transferVisibleColumns.value = newVisibleColumns;
  }
};

// 在穿梭框中下移列
const moveColumnDownInTransfer = (prop: string) => {
  const index = getColumnIndexInVisible(prop);
  if (index < transferVisibleColumns.value.length - 1) {
    const newVisibleColumns = [...transferVisibleColumns.value];
    const temp = newVisibleColumns[index];
    newVisibleColumns[index] = newVisibleColumns[index + 1];
    newVisibleColumns[index + 1] = temp;
    transferVisibleColumns.value = newVisibleColumns;
  }
};

// 从穿梭框保存配置
const saveColumnsConfigFromTransfer = () => {
  const updatedColumns = tableColumns.value.map(col => ({
    ...col,
    visible: !transferVisibleColumns.value.includes(col.prop)
  }));
  
  // 重新排序可见列的顺序
  let orderCounter = 1;
  transferVisibleColumns.value.forEach(prop => {
    const colIndex = updatedColumns.findIndex(col => col.prop === prop);
    if (colIndex !== -1) {
      updatedColumns[colIndex].order = orderCounter++;
    }
  });
  
  // 为隐藏的列分配剩余的顺序
  updatedColumns
    .filter(col => !col.visible)
    .sort((a, b) => a.order - b.order)
    .forEach(col => {
      col.order = orderCounter++;
    });
  
  tableColumns.value = updatedColumns;
  saveTableColumnsConfig(tableId, updatedColumns);
  columnConfigDialogVisible.value = false;
  ElMessage.success('The table column configuration has been saved.');
};

// 打开列配置对话框时初始化穿梭框数据
const openColumnConfig = () => {
  columnConfigDialogVisible.value = true;
  // 确保数据是最新的
  nextTick(() => {
    transferVisibleColumns.value = tableColumns.value
      .filter(col => !col.visible)
      .sort((a, b) => a.order - b.order)
      .map(col => col.prop);
  });
};

// 当前显示的表格列
const visibleColumns = computed(() => {
  return sortTableColumns(tableColumns.value).filter(col => col.visible);
});
const isShowColumn = (prop: string) => {
  return tableColumns.value.find(col => col.prop === prop)?.visible;
}
onUnmounted(() => {
  // tableRef.value?.$refs.bodyWrapper.removeEventListener("scroll", handleScroll);
});
</script>
<style lang="scss">
.edit-form-dialog {
  .el-form-item__label {
    line-height: unset !important;
  }
  .el-form-item__content {
    margin-bottom: 10px;
  }
}
  
.input-with-select {
  .el-input-group__append {
    padding: 0;
    .search-wrapper {
      padding: 0 10px;
      cursor: pointer;
    }
  }
}
.edit_dialog {
width: 1100px !important;
max-width: 95vw;
.el-select {
  width: 100%;
}
element.style {
  width: 1000;
}
.el-icon-upload {
  font-size: 2rem;
  cursor: pointer;
}
}

.el-table {
    thead {
  .cell {
    white-space: pre-line !important;
  }
}}

.table-boxs {
width: 100%;
overflow-x: auto;
}
.unfreight-table tr td:nth-child(1) {
  width: 1px;overflow:hidden !important;
}
.unfreight-table tr th:nth-child(1) {
  width: 1px;overflow:hidden !important;
}
.el-table_1_column_2{
  width: 100px;
}
.unfreight-table tr th:nth-child(2) {
  width: 100px;

}
.el-table__expand-icon{
width: 1px;overflow:hidden !important
}

.unfreight-table {   
.el-table__expand-column .cell {
  display: block;
}
.el-table__fixe {
  z-index: 100;
}
.unfreight-table-history {
  margin-left: 50px;
  width: calc(100% - 50px - 160px);
  .el-table__row {
    background-color: #f0f0f0;
    .cell-bg-color {
      background-color: #ef9c9c !important;
    }
  }
}
}

.el-table_1_column_1 {
width: 0 !important;
overflow:hidden !important;
}

.warning_row .el-table__cell{
   background:#6eadff !important;
}
.success_row .el-table__cell {
   background:#fdfd22!important;
}

/* 穿梭框样式 */
.transfer-container {
  padding: 10px;
}

.column-transfer {
  .el-checkbox{
    margin-right: 0;
  }
  .el-transfer-panel {
    width: 45% !important;
    height: 90% !important;
  }
  
  .el-transfer__buttons {
    padding: 0 10px;
  }
  
  .el-transfer__button {
    display: block;
    margin: 0 auto 10px;
    
    &:first-child {
      margin-bottom: 10px;
    }
  }
}

.transfer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  // padding: 8px 12px;
  width: 100%;
  
  .transfer-actions {
    display: flex;
    
    .el-button {
      padding: 2px 4px;
      min-height: auto;
    }
  }
}

.setting-btn {
  position: absolute;
  top: 0;
  right: 0;
}
</style>
<style lang="scss" scoped>
 
.el-table_1_column_1 {
width: 0 !important;
overflow:hidden !important;
}
.table-box {
.el-form-item {
  margin-bottom: 18px;
}
}
 
.block2 {
  min-height: 100px;
  .el-row {
    margin:10px 10px;
  }
}
.el-select-dropdown__list {
  display: flex;
  flex-wrap: wrap;
}
 
.el-select-dropdown__item {
  width: auto; /* 或者根据需要设置固定宽度 */
  margin: 5px; /* 根据需要调整间距 */
}
.example-showcase .el-loading-mask {
z-index: 9;
}

</style>